@ssa-ui-kit/core 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Typeahead/Typeahead.context.ts

@@ -52,6 +52,9 @@ export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
   handleRemoveSelectedClick: () => () => {
     /* no-op */
   },
+  handleInputBlur: () => {
+    /* no-op */
+  },
   handleSelectedClick: () => {
     /* no-op */
   },

package/src/components/Typeahead/Typeahead.stories.tsx

@@ -63,6 +63,9 @@ export const Basic: StoryObj = (args: TypeaheadProps) => {
       <Typeahead
         initialSelectedItems={[items[2].id]}
         isDisabled={args.isDisabled}
+        onBlur={() => {
+          console.log('>>>onBlur event');
+        }}
         name={'typeahead-dropdown'}
         label="Label"
         helperText="Helper Text"
@@ -124,6 +127,9 @@ export const Multiple: StoryObj = (args: TypeaheadProps) => {
         initialSelectedItems={[items[2].id, items[1].id]}
         isMultiple
         isDisabled={args.isDisabled}
+        onBlur={() => {
+          console.log('>>>onBlur event');
+        }}
         label="Label"
         helperText="Helper Text"
         register={register}

package/src/components/Typeahead/Typeahead.tsx

@@ -45,6 +45,7 @@ export const Typeahead = ({
   setValue,
   register,
   onChange,
+  onBlur,
   renderOption,
 }: TypeaheadProps) => {
   const theme = useTheme();
@@ -67,6 +68,7 @@ export const Typeahead = ({
     setValue,
     register,
     onChange,
+    onBlur,
     renderOption,
   });
 

package/src/components/Typeahead/components/MultipleTrigger.tsx

@@ -67,6 +67,7 @@ export const MultipleTrigger = () => {
               onClick: context.handleInputClick,
               onKeyDown: context.handleInputKeyDown,
               onChange: context.handleInputChange,
+              onBlur: context.handleInputBlur,
               value: context.inputValue,
               autoComplete: 'off',
               className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/components/SingleTrigger.tsx

@@ -26,6 +26,7 @@ export const SingleTrigger = () => {
             onClick: context.handleInputClick,
             onKeyDown: context.handleInputKeyDown,
             onChange: context.handleInputChange,
+            onBlur: context.handleInputBlur,
             value: context.inputValue,
             autoComplete: 'off',
             className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/types.ts

@@ -34,6 +34,7 @@ export interface TypeaheadProps {
   setValue?: UseFormSetValue<FieldValues>;
   register?: UseFormReturn['register'];
   onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
   renderOption?: (data: {
     value: string | number;
     input: string;
@@ -48,6 +49,7 @@ export type UseTypeaheadProps = Pick<
   | 'children'
   | 'isMultiple'
   | 'onChange'
+  | 'onBlur'
   | 'renderOption'
   | 'isOpen'
   | 'className'

package/src/components/Typeahead/useTypeahead.tsx

@@ -29,6 +29,7 @@ export const useTypeahead = ({
   register,
   setValue,
   onChange,
+  onBlur,
   renderOption,
 }: UseTypeaheadProps) => {
   const inputName = `${name}-text`;
@@ -261,7 +262,11 @@ export const useTypeahead = ({
       inputRef.current?.focus();
       event.stopPropagation();
       event.preventDefault();
-    } else if (['Tab', 'Enter'].includes(event.code) && firstSuggestion) {
+    } else if (
+      ['Tab', 'Enter'].includes(event.code) &&
+      firstSuggestion &&
+      firstSuggestion !== inputValue
+    ) {
       const foundItem = Object.values(optionsWithKey).find(
         (item) =>
           `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase(),
@@ -281,7 +286,7 @@ export const useTypeahead = ({
       handleChange(selected[selected.length - 1]);
       event.preventDefault();
       return false;
-    } else if (!isOpen) {
+    } else if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };
@@ -336,6 +341,7 @@ export const useTypeahead = ({
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
+    handleInputBlur: onBlur,
     handleSelectedClick,
     handleRemoveSelectedClick,
   };