Iprove useInput hook and it integration

Author: Kubit

src/components/dropdownSelected/__tests__/dropdownSelected.test.tsx

@@ -204,4 +204,63 @@ describe('DropdownSelected component', () => {
 
     expect(option1).not.toBeInTheDocument();
   });
+
+  it('The container should open the dropdown on focus if openAndCloseOnHover', () => {
+    const { getByTestId } = renderProvider(
+      <DropdownSelected
+        {...mockProps}
+        openAndCloseOnHover
+        dataTestIdComponent="container-test-id"
+      />
+    );
+
+    const container = getByTestId('container-test-id');
+
+    act(() => {
+      fireEvent.focus(container);
+    });
+
+    const optionsAfterOpened = getByTestId(mockProps.dataTestIdListOptionsContainer);
+    expect(optionsAfterOpened).toBeInTheDocument();
+  });
+
+  it('The container should close the dropdown on blur if openAndCloseOnHover', () => {
+    const { queryByTestId, getByTestId } = renderProvider(
+      <DropdownSelected
+        {...mockProps}
+        openAndCloseOnHover
+        dataTestIdComponent="container-test-id"
+        defaultOpen={true}
+      />
+    );
+
+    const container = getByTestId('container-test-id');
+
+    act(() => {
+      fireEvent.blur(container);
+    });
+
+    const optionsAfterOpened = queryByTestId(mockProps.dataTestIdListOptionsContainer);
+    expect(optionsAfterOpened).not.toBeInTheDocument();
+  });
+
+  it('The container should close the dropdown on escape keydown', () => {
+    const { queryByTestId, getByTestId } = renderProvider(
+      <DropdownSelected
+        {...mockProps}
+        openAndCloseOnHover
+        dataTestIdComponent="container-test-id"
+        defaultOpen={true}
+      />
+    );
+
+    const container = getByTestId('container-test-id');
+
+    act(() => {
+      fireEvent.keyDown(container, { key: 'Escape' });
+    });
+
+    const optionsAfterOpened = queryByTestId(mockProps.dataTestIdListOptionsContainer);
+    expect(optionsAfterOpened).not.toBeInTheDocument();
+  });
 });

src/components/inputDropdown/hooks/useInputDropdown.ts

@@ -306,15 +306,15 @@ export const useInputDropdown = (props: ParamsType): ReturnHookType => {
 
   // Uses effects
 
-  // Update value when new prop value
+  // Update value when value or optionList options changes
   useEffect(() => {
     setValueSearchSelected(props.value);
     const searchText = findOptionByValue(props.value, props.optionList.options)?.label ?? '';
     handleChangeShowAllOptions({ value: true });
     setLabelSearchSelected(searchText);
     setSearchText(searchText);
     setInputPopoverText(searchText);
-  }, [props.value]);
+  }, [props.value, props.optionList.options]);
 
   const actionBottomSheetRefCb = useCallback(node => {
     // Focus in the input popover if exists

src/hooks/useInput/useInput.ts

@@ -71,6 +71,7 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
   const eventKeyPressRef = useRef<EventKeyPressRefType>();
   const positionRef = useRef(0);
   const inputRef = useRef<HTMLInputElement | undefined>();
+  const pasteRef = useRef<boolean>(false);
 
   // Return ref of the input element
   useImperativeHandle(
@@ -117,6 +118,11 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
   }, []);
 
   useEffect(() => {
+    // prevent the behaviour, when the value is changed by paste method
+    if (pasteRef.current) {
+      pasteRef.current = false;
+      return;
+    }
     if (eventKeyPressRef.current && props.mask && inputRef?.current && value) {
       const { start, end } = eventKeyPressRef.current.cursor;
       // if multiple digits are selected, recovery the selected area
@@ -357,6 +363,7 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
       event.preventDefault();
       return;
     }
+    pasteRef.current = true;
     props.onPaste?.(event);
   };