Improve inputs search

Author: Kubit

src/components/input/types/inputTheme.ts

@@ -48,6 +48,7 @@ export type InputBasicStateProps = {
   label?: TypographyTypes & {
     type?: LABEL_TYPE;
   };
+  focusVisibleCustom?: CommonStyleType;
   labelContainer?: CommonStyleType;
   placeholder?: TypographyTypes;
   asterisk?: TypographyTypes;

src/components/inputCurrency/__tests__/inputCurrency.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { axe } from 'jest-axe';
 
-import { FormatNumber, InputContentPosition, InputState } from '@/components/input/types';
+import { InputContentPosition, InputState } from '@/components/input/types';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { POSITIONS } from '@/types/positions';
 
@@ -28,7 +28,7 @@ const format = {
   style: 'decimal',
   maximumFractionDigits: 3,
   minimumFractionDigits: 1,
-} as FormatNumber;
+};
 
 describe('New Input Currency Component', () => {
   test('Should render InputCurrency component', async () => {

src/components/inputDate/hooks/useInputDate.ts

@@ -37,7 +37,7 @@ type ParamsType = ParamsTypeInputHook & {
   onWrapperBlur?: FocusEventHandler<HTMLDivElement>;
 };
 
-type ReturnType = ReturnTypeInputHook & {
+type ReturnType = Omit<ReturnTypeInputHook, 'eventKeyPressRef'> & {
   // modifiers
   dateFormatted: Date[];
   calendarOpen: boolean;
@@ -393,6 +393,19 @@ export const useInputDate = ({
     if (props.hasRange) {
       handleSetValue(`${getDate(orderedDates[0])} ${getDate(orderedDates[1])}`);
     } else if (dateValue?.length === props.format?.length) {
+      if (inputRef?.current) {
+        // Inner input value should be set before the rerendering
+        // This avoid calling onChange event when input.value is different from the current value when picking a date
+        inputRef.current.value = dateValue;
+        // When selecting a date from the calendar, set the cursor to the end of the input
+        eventKeyPressRef.current = {
+          key: '',
+          cursor: {
+            start: dateValue.length,
+            end: dateValue.length,
+          },
+        };
+      }
       handleSetValue(dateValue);
     }
 
@@ -431,6 +444,7 @@ export const useInputDate = ({
   const {
     value,
     state,
+    eventKeyPressRef,
     inputRef,
     handleChangeInternal,
     handleBlurInternal,

src/components/inputSearch/components/popoverSearchList.tsx

@@ -160,7 +160,7 @@ export const PopoverSearchListComponent = (
       hasBackDrop
       aria-modal={useActionBottomSheet ? true : undefined}
       blockBack={props.blockBackPopover}
-      component={useActionBottomSheet ? PopoverComponentType.DIV : undefined}
+      component={PopoverComponentType.DIV}
       dataTestId={`${props.dataTestId}Popover`}
       focusFirstDescendantAutomatically={false}
       focusLastElementFocusedAfterClose={false}

src/components/inputSearch/hooks/__tests__/useInputSearch.test.ts

@@ -62,6 +62,7 @@ const mockProps = {
 
 const mockUseInputValues = {
   value: 'op',
+  eventKeyPressRef: { current: undefined },
   inputRef: { current: document.createElement('input') },
   state: InputState.ACTIVE,
   handleBlurInternal: jest.fn(),

src/components/inputSearch/hooks/useInputSearch.ts

@@ -251,7 +251,7 @@ export const useInputSearch = ({
         }
       }
       // Focus the item
-      (options[selectedOption] as HTMLElement).focus();
+      (options[selectedOption] as HTMLElement | undefined)?.focus();
     };
 
     // When arrow down
@@ -304,6 +304,11 @@ export const useInputSearch = ({
     setInputPopoverText(props.value ?? '');
   }, [props.value]);
 
+  // Open or close the popover from external props
+  useEffect(() => {
+    handleOpenOptions(props.open);
+  }, [props.open]);
+
   // Set focus on popover input when show
   const actionBottomSheetRefCb = useCallback(node => {
     node?.querySelector('input')?.focus();