@ssa-ui-kit/core 2.16.1 → 2.16.2-canary-1c17e94-20250507

package/dist/index.js

@@ -11678,7 +11678,7 @@ const Trigger = () => {
           name: "carrot-right",
           size: 18,
           color: theme.colors.greyDarker80,
-          className: classNames?.trigger?.icon,
+          className: classNames?.trigger?.arrowIcon,
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
@@ -11699,6 +11699,7 @@ const Trigger = () => {
           variant: "tertiary",
           "aria-label": "Calendar",
           isDisabled: disabled,
+          className: classNames?.trigger?.calendarIcon,
           css: /*#__PURE__*/(0,react_namespaceObject.css)({
             padding: 0,
             margin: '0 8px 0 14px',
@@ -17522,6 +17523,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
+  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17529,7 +17531,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return {};
   },
-  handleChange: () => {
+  onChange: () => {
     /* no-op */
   },
   handleClearAll: () => {
@@ -17549,9 +17551,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
-  },
-  handleSelectedClick: () => {
-    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17559,10 +17558,18 @@ const useTypeaheadContext = () => external_react_namespaceObject.useContext(Type
 
 
 
+const findExactMatch = (input, options) => {
+  const normalizedInput = input.toLowerCase();
+  return Object.values(options).find(opt => {
+    const labelText = (opt.label ?? opt.value).toString().toLowerCase();
+    return labelText === normalizedInput;
+  });
+};
 const useTypeahead = ({
   name = 'typeahead-input',
   isOpen: isInitOpen,
-  selectedItems,
+  selectedItems: providedSelectedItems,
+  defaultSelectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -17575,8 +17582,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  register,
-  setValue,
+  filterOptions = true,
+  autoSelect = true,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17584,271 +17591,250 @@ const useTypeahead = ({
   renderOption
 }) => {
   const inputName = `${name}-text`;
-  const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
-  const [selected, setSelected] = (0,external_react_namespaceObject.useState)(selectedItems || []);
-  const [optionsWithKey, setOptionsWithKey] = (0,external_react_namespaceObject.useState)({});
-  const [isEmpty, setIsEmpty] = (0,external_react_namespaceObject.useState)(true);
-  const [isFirstRender, setFirstRender] = (0,external_react_namespaceObject.useState)(true);
-  const [items, setItems] = (0,external_react_namespaceObject.useState)();
-  const [inputValue, setInputValue] = (0,external_react_namespaceObject.useState)('');
-  const [status, setStatus] = (0,external_react_namespaceObject.useState)('basic');
-  const [firstSuggestion, setFirstSuggestion] = (0,external_react_namespaceObject.useState)('');
-  const inputRef = (0,external_react_namespaceObject.useRef)(null);
-  const typeaheadId = (0,external_react_namespaceObject.useId)();
-  const triggerRef = (0,external_react_namespaceObject.useRef)(null);
-  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (!register) {
-      console.warn('Typeahead component must be used within a Form component');
-    }
-  }, []);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (isMultiple) {
-      setValue?.(name, selected, {
-        shouldDirty: !isFirstRender
-      });
-      setInputValue('');
-      setFirstSuggestion('');
-    } else {
-      setValue?.(name, selected.length ? selected[0] : [], {
-        shouldDirty: !isFirstRender
-      });
+  const defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
+  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
+  const {
+    register,
+    setValue,
+    watch
+  } = form;
+  const formFieldValue = watch(name);
+  const controlledValue = (() => {
+    if (providedSelectedItems) {
+      return providedSelectedItems;
     }
-    handleOnEmptyChange(!selected.length);
-  }, [selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (isDisabled && isOpen) {
-      setIsOpen(false);
+    // controlledValue should be undefined if defaultSelectedItems is provided
+    if (defaultSelectedItems) {
+      return;
     }
-  }, [isDisabled]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    const status = success ? 'success' : useFormResult.formState.errors[name] ? 'error' : 'basic';
-    setStatus(status);
-  }, [useFormResult.formState.errors[name], success]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (error) {
-      useFormResult.setError(name, error);
-    } else {
-      setStatus('basic');
-      useFormResult.resetField(name);
+    if (isMultiple) {
+      return Array.isArray(formFieldValue) ? formFieldValue : [];
     }
-  }, [error]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    processChildren({
-      selectedLocal: selected
+    return ['number', 'string'].includes(typeof formFieldValue) ? [formFieldValue] : [];
+  })();
+  const [isOpen, _setIsOpen] = (0,hooks_namespaceObject.useUncontrolled)({
+    defaultValue: isInitOpen,
+    finalValue: false
+  });
+  const [selectedItems, setSelected] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: controlledValue,
+    defaultValue: defaultSelectedItems,
+    finalValue: []
+  });
+  const [rawInput, setRawInput] = (0,external_react_namespaceObject.useState)(null);
+  const {
+    ref: inputRef
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const triggerRef = (0,external_react_namespaceObject.useRef)(null);
+  (0,external_react_hook_form_namespaceObject.useController)({
+    name,
+    rules: validationSchema,
+    defaultValue: isMultiple ? selectedItems : selectedItems[0]
+  });
+  const typeaheadId = (0,external_react_namespaceObject.useId)();
+  const optionsWithKey = (0,external_react_namespaceObject.useMemo)(() => {
+    const opts = {};
+    external_react_default().Children.forEach(children, child => {
+      if (/*#__PURE__*/external_react_default().isValidElement(child)) {
+        opts[child.props.value] = child.props;
+      }
     });
+    return opts;
   }, [children]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    setSelected(selectedItems || []);
-    if (selectedItems?.length) {
-      if (!isMultiple) {
-        const currentOption = optionsWithKey[selectedItems[0]];
-        const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
-        setInputValue(`${optionText}`);
-      }
-    } else {
-      setInputValue('');
-      setFirstSuggestion('');
-    }
-    processChildren({
-      selectedLocal: selectedItems || []
+  const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
+    if (isMultiple) return rawInput ?? '';
+    if (rawInput != null) return rawInput;
+    return selectedItems.length === 1 ? optionsWithKey[selectedItems[0]]?.label?.toString() || '' : '';
+  }, [isMultiple, rawInput, selectedItems, optionsWithKey]);
+  const filteredChildren = (0,external_react_namespaceObject.useMemo)(() => {
+    // if filtering is disabled, or there's no input, show all
+    if (!filterOptions || !inputValue) return external_react_default().Children.toArray(children);
+    const needle = inputValue.toLowerCase();
+    return external_react_default().Children.toArray(children).filter(child => {
+      if (! /*#__PURE__*/external_react_default().isValidElement(child)) return false;
+      const {
+        label,
+        value
+      } = child.props;
+      const text = (label ?? value)?.toString().toLowerCase() || '';
+      return text.includes(needle);
     });
-  }, [selectedItems]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
-    const filteredOptions = [...childrenArray];
-    const childItems = filteredOptions.map((child, index) => {
+  }, [children, inputValue]);
+  const items = (0,external_react_namespaceObject.useMemo)(() => {
+    return filteredChildren.map((child, index) => {
+      if (! /*#__PURE__*/external_react_default().isValidElement(child)) return null;
+      const isActive = selectedItems.includes(child.props.value);
       const {
-        id,
         value,
         label,
+        id,
         isDisabled
       } = child.props;
-      const isActive = selected.includes(child.props.value);
       return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
         ...child.props,
+        index,
         isActive,
         isDisabled,
-        id,
+        role: 'option',
         'aria-selected': isActive,
         'aria-labelledby': `typeahead-label-${name}`,
-        role: 'option',
-        onClick: event => {
-          event.preventDefault();
+        onClick: e => {
+          e.preventDefault();
           if (!isDisabled) {
-            handleChange(child.props.value);
+            const shouldClose = !isMultiple;
+            handleChange({
+              value,
+              shouldClose
+            });
           }
         },
-        children: renderOption ? renderOption({
+        children: renderOption?.({
           value: id || value,
-          input: inputValue || '',
+          input: inputValue,
           label
-        }) : child.props.children || child.props.label || child.props.value
+        }) ?? child.props.children ?? label ?? value
       });
     });
-    setItems(childItems);
-  }, [inputValue, optionsWithKey, selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (!isMultiple && Object.keys(optionsWithKey).length) {
-      const foundItem = Object.values(optionsWithKey).find(item => item.label === inputValue);
-      if (!foundItem && selected.length) {
-        setSelected([]);
-      }
-      if (foundItem && !selected.includes(foundItem?.value)) {
-        setSelected([foundItem.value]);
+  }, [children, selectedItems, inputValue]);
+  const firstSuggestion = (0,external_react_namespaceObject.useMemo)(() => {
+    if (!inputValue) return '';
+    const needle = inputValue.toLowerCase();
+    for (const child of filteredChildren) {
+      if (! /*#__PURE__*/external_react_default().isValidElement(child)) continue;
+      const labelText = (child.props.label ?? child.props.value).toString();
+      if (labelText.toLowerCase().startsWith(needle)) {
+        return inputValue + labelText.slice(inputValue.length);
       }
     }
-  }, [optionsWithKey, inputValue]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    processSingleSelected({
-      optionsWithKeyLocal: optionsWithKey,
-      selectedLocal: selected
-    });
-  }, [selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (inputValue) {
-      const newFirstSuggestion = Object.values(optionsWithKey)?.find(item => {
-        const label = (0,utils_namespaceObject.propOr)('', 'label')(item);
-        return label.toLowerCase().startsWith(inputValue.toLowerCase());
-      });
-      const firstSuggestionLabel = (0,utils_namespaceObject.propOr)('', 'label')(newFirstSuggestion);
-      const humanSuggestionLabel = inputValue.concat(firstSuggestionLabel.slice(inputValue.length));
-      setFirstSuggestion(humanSuggestionLabel);
-    } else {
-      setFirstSuggestion('');
-      if (isMultiple) {
-        setInputValue('');
-      }
-    }
-  }, [inputValue, items, selected]);
-  const processSingleSelected = ({
-    optionsWithKeyLocal = {},
-    selectedLocal = []
-  }) => {
-    if (!isMultiple && selectedLocal.length && Object.keys(optionsWithKeyLocal).length) {
-      const currentOption = optionsWithKeyLocal[selectedLocal[0]];
-      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
-      setInputValue(`${optionText}`);
+    return '';
+  }, [inputValue, filteredChildren]);
+  const setIsOpen = open => {
+    if (!open) {
+      form.trigger(name);
     }
+    _setIsOpen(open);
   };
-  const processChildren = ({
-    selectedLocal
+  const handleChange = ({
+    value,
+    shouldClose = true,
+    resetInput = true
   }) => {
-    const keyedOptions = {};
-    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
-      keyedOptions[child.props.value] = {
-        ...child.props
-      };
-      return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
-        ...child.props
-      });
-    });
-    setOptionsWithKey(keyedOptions);
-    setItems(childItems);
-    processSingleSelected({
-      optionsWithKeyLocal: keyedOptions,
-      selectedLocal
-    });
-    setFirstRender(false);
-  };
-  const handleOnEmptyChange = newIsEmptyValue => {
-    if (newIsEmptyValue !== isEmpty) {
-      setIsEmpty(newIsEmptyValue);
-      onEmptyChange?.(newIsEmptyValue);
+    if (isDisabled || value == null) return;
+    const alreadySelected = selectedItems.includes(value);
+    const updatedSelected = isMultiple ? alreadySelected ? selectedItems.filter(item => item !== value) : [...selectedItems, value] : alreadySelected ? [] : [value];
+    const fieldValue = isMultiple ? updatedSelected : updatedSelected[0];
+    setSelected(updatedSelected);
+    setValue?.(name, fieldValue);
+    form.clearErrors(name);
+    if (resetInput) {
+      const rawInputValue = isMultiple ? null : updatedSelected.length ? String(optionsWithKey[value]?.label) : null;
+      setRawInput(rawInputValue);
     }
-  };
-  const handleOpenChange = open => {
-    if (!isDisabled) {
-      setIsOpen(open);
+    if (shouldClose) {
+      setIsOpen(false);
     }
+    onChange?.(value, !alreadySelected);
+    onEmptyChange?.(updatedSelected.length === 0);
   };
-  const handleChange = changingValue => {
-    if (isDisabled || changingValue === undefined) {
-      return;
-    }
-    const isNewSelected = true;
-    const isChangingItemSelected = selected.includes(changingValue);
-    if (isMultiple) {
-      setSelected(currentSelected => isChangingItemSelected ? currentSelected.filter(current => current !== changingValue) : [...currentSelected, changingValue]);
-      setInputValue('');
-    } else {
-      if (selected[0] === changingValue) {
-        setSelected([]);
-        setInputValue('');
-      } else {
-        setSelected([changingValue]);
-      }
-    }
+  const handleClearAll = e => {
+    if (isDisabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setSelected([]);
+    setRawInput(null);
     setIsOpen(false);
-    setFirstSuggestion('');
+    setValue?.(name, undefined);
+    form.trigger(name);
     inputRef.current?.focus();
-    setStatus('basic');
-    useFormResult.clearErrors(name);
-    useFormResult.trigger(name);
-    onChange?.(changingValue, isNewSelected);
+    onClearAll?.();
+    onEmptyChange?.(true);
   };
-  const handleClearAll = event => {
-    if (isDisabled) {
+  const handleInputChange = e => {
+    const input = e.target.value;
+    setRawInput(input);
+    if (!autoSelect || !filterOptions) return;
+    const match = findExactMatch(input, optionsWithKey);
+    if (match) {
+      handleChange({
+        value: match.value,
+        shouldClose: false
+      });
       return;
     }
-    event.stopPropagation();
-    event.preventDefault();
-    setSelected([]);
-    setInputValue('');
-    setIsOpen(false);
-    setFirstSuggestion('');
-    useFormResult.trigger(name);
-    inputRef.current?.focus();
-    onClearAll?.();
+    // unset selected value if not fully matched
+    if (!isMultiple && selectedItems.length > 0) {
+      handleChange({
+        value: selectedItems[0],
+        shouldClose: false,
+        resetInput: false
+      });
+    }
   };
-  const handleInputClick = event => {
+  const handleInputClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
     if (!isDisabled) {
       inputRef.current?.focus();
       setIsOpen(true);
     }
-    event.stopPropagation();
-    event.preventDefault();
   };
-  const handleInputKeyDown = event => {
-    if (['Space'].includes(event.code) && !firstSuggestion) {
-      setIsOpen(true);
-      inputRef.current?.focus();
-      event.stopPropagation();
-      event.preventDefault();
-    } else if (['Tab', 'Enter'].includes(event.code) && firstSuggestion && firstSuggestion !== inputValue) {
-      const foundItem = Object.values(optionsWithKey).find(item => `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase());
-      handleChange(foundItem?.value);
-      if (foundItem) {
-        setInputValue(`${foundItem?.label}`);
+  const handleInputKeyDown = e => {
+    const isEnterOrTab = ['Enter', 'Tab'].includes(e.code);
+    if (isEnterOrTab && firstSuggestion && firstSuggestion !== inputValue) {
+      const match = findExactMatch(firstSuggestion, optionsWithKey);
+      if (match) {
+        handleChange({
+          value: match.value
+        });
       }
-      event.preventDefault();
-      return false;
-    } else if (isMultiple && event.code === 'Backspace' && selected.length > 0 && !firstSuggestion) {
-      handleChange(selected[selected.length - 1]);
-      event.preventDefault();
-      return false;
-    } else if (!isOpen && firstSuggestion !== inputValue) {
+      e.preventDefault();
+      return;
+    }
+    if (isMultiple && e.code === 'Backspace' && selectedItems.length && !inputValue) {
+      const lastSelected = selectedItems[selectedItems.length - 1];
+      handleChange({
+        value: lastSelected,
+        shouldClose: false
+      });
+      e.preventDefault();
+      return;
+    }
+    if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };
-  const handleInputChange = event => {
-    setInputValue(event.target.value);
-  };
-  const handleSelectedClick = event => {
-    event.stopPropagation();
+  const handleRemoveSelectedClick = value => e => {
+    e.stopPropagation();
+    handleChange({
+      value
+    });
+    onRemoveSelectedClick?.(value);
+    form.trigger(name);
   };
-  const handleRemoveSelectedClick = selectedItem => event => {
-    event.stopPropagation();
-    handleChange(selectedItem);
-    onRemoveSelectedClick?.(selectedItem);
+  const handleOpenChange = (open, event, reason) => {
+    if (isDisabled || reason === 'reference-press') {
+      return;
+    }
+    setIsOpen(open);
+    if (!isMultiple && selectedItems.length > 0) {
+      const selectedValue = selectedItems[0];
+      const label = optionsWithKey[selectedValue]?.label;
+      setRawInput(label ? String(label) : null);
+      return;
+    }
+    setRawInput(null);
   };
+  const status = (() => {
+    if (form.formState.errors[name]) return 'error';
+    if (error) return 'error';
+    if (success) return 'success';
+    return 'basic';
+  })();
   return {
     isOpen,
     isDisabled,
     optionsWithKey,
-    selectedItems: selected,
+    selectedItems,
     inputRef,
     firstSuggestion,
     isMultiple,
@@ -17864,18 +17850,18 @@ const useTypeahead = ({
     inputValue,
     validationSchema,
     status,
+    error: error ?? form.formState.errors[name],
     placeholder,
     options: items,
-    useFormResult,
+    useFormResult: form,
     register,
     setValue,
-    handleChange,
+    onChange,
     handleClearAll,
     handleOpenChange,
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
-    handleSelectedClick,
     handleRemoveSelectedClick
   };
 };
@@ -17989,7 +17975,7 @@ const MultipleTrigger = () => {
   const theme = (0,react_namespaceObject.useTheme)();
   const context = useTypeaheadContext();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !!context.placeholder) {
+  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -17997,7 +17983,7 @@ const MultipleTrigger = () => {
       const currentOption = context.optionsWithKey[selectedItem];
       const optionText = currentOption ? currentOption.children || currentOption.label || currentOption.value : '';
       return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadItem, {
-        onClick: context.handleSelectedClick,
+        onClick: e => e.stopPropagation(),
         isDisabled: context.isDisabled,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemLabel, {
           isDisabled: context.isDisabled,
@@ -18041,11 +18027,6 @@ const MultipleTrigger = () => {
         disabled: context.isDisabled,
         className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
         ...typeaheadInputAdditionalProps
-      }), (0,jsx_runtime_namespaceObject.jsx)("input", {
-        type: "hidden",
-        readOnly: true,
-        value: context.selectedItems,
-        ...context.register?.(context.name, context.validationSchema)
       })]
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
@@ -18072,7 +18053,7 @@ const SingleTrigger = () => {
   const context = useTypeaheadContext();
   const theme = (0,react_namespaceObject.useTheme)();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !!context.placeholder) {
+  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadInputsGroupWrapper, {
@@ -18101,11 +18082,6 @@ const SingleTrigger = () => {
       tabIndex: -1,
       className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
       ...typeaheadInputAdditionalProps
-    }), (0,jsx_runtime_namespaceObject.jsx)("input", {
-      type: "hidden",
-      readOnly: true,
-      value: context.selectedItems[0] || '',
-      ...context.register?.(context.name, context.validationSchema)
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
       "data-testid": "remove-all-button",
@@ -18212,6 +18188,7 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
+  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18229,8 +18206,6 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
-  setValue,
-  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18241,6 +18216,7 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
+    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18254,8 +18230,6 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
-    setValue,
-    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18303,7 +18277,7 @@ const Typeahead = ({
         status: hookResult.status,
         disabled: isDisabled,
         "data-testid": "helper-text",
-        children: error ? error?.message : helperText
+        children: hookResult.error ? hookResult.error?.message?.toString() : helperText
       })]
     })
   });
@@ -19181,6 +19155,7 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
+    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19195,43 +19170,44 @@ const SelectWidget = props => {
   const handleBlur = ({
     target
   }) => onBlur(id, target && target.value);
+  const handleFocus = ({
+    target
+  }) => onFocus(id, target && target.value);
   const onEmptyChange = isEmpty => {
     if (isEmpty) {
       handleChange();
     }
   };
-  const register = fieldName => ({
-    onBlur: handleBlur,
-    onChange: handleChange,
-    name: fieldName,
-    ref: () => {}
-  });
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const selectedItems = selectedIndex ? [items[Number(selectedIndex)].value] : [];
-  return (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
-    width: "100%",
-    selectedItems: selectedItems,
-    isDisabled: disabled,
-    name: name
-    // RJSF provides placeholder as empty string
-    ,
-    placeholder: placeholder || undefined,
-    onChange: handleChange,
-    register: register,
-    onEmptyChange: onEmptyChange,
-    renderOption: ({
-      label,
-      input
-    }) => highlightInputMatch(label, input),
-    children: items.map(({
-      label,
-      value
-    }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
-      value: value,
-      label: label || value,
-      isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
-      children: label || value
-    }, value))
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    id: id,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    children: (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
+      width: "100%",
+      selectedItems: selectedItems,
+      isDisabled: disabled,
+      name: name
+      // RJSF provides placeholder as empty string
+      ,
+      placeholder: placeholder || undefined,
+      onChange: handleChange,
+      onEmptyChange: onEmptyChange,
+      renderOption: ({
+        label,
+        input
+      }) => highlightInputMatch(label, input),
+      children: items.map(({
+        label,
+        value
+      }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+        value: value,
+        label: label || value,
+        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
+        children: label || value
+      }, value))
+    })
   });
 };
 ;// ./src/components/JsonSchemaForm/widgets/PasswordWidget.tsx