fix(ChipsSelect): fix focusedOptionIndex logic (#5129)

Исправляем логику фокуса в ChipsSelect

- fixes #5051

packages/vkui/src/components/ChipsSelect/ChipsSelect.test.tsx

@@ -92,6 +92,9 @@ describe('ChipsSelect', () => {
       render(<ChipsSelectTest value={[]} options={options} onChange={(e) => (value = e)} />);
       await toggleDropdown();
 
+      // Focus on first element
+      userEvent.keyboard('{arrowdown}');
+
       const idx = 7;
       for (let i = 0; i < idx; i++) {
         userEvent.keyboard('{arrowdown}');

packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx

@@ -155,7 +155,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
 
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setOpened(true);
-    setFocusedOptionIndex(0);
+    setFocusedOptionIndex(null);
     onFocus!(e);
   };
 
@@ -189,7 +189,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
     }
   };
 
-  const focusOptionByIndex = (index: number, oldIndex: number) => {
+  const focusOptionByIndex = (index: number, oldIndex: number | null) => {
     const { length } = filteredOptions;
 
     if (index < 0) {
@@ -207,17 +207,15 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
   };
 
   const focusOption = (nextIndex: number | null, type: FocusActionType) => {
-    let index = typeof nextIndex !== 'number' ? -1 : nextIndex;
+    let index = nextIndex === null ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
       index = index + 1;
     } else if (type === FOCUS_ACTION_PREV) {
       index = index - 1;
     }
 
-    if (focusedOptionIndex != null) {
-      focusOptionByIndex(index, focusedOptionIndex);
-    }
+    focusOptionByIndex(index, focusedOptionIndex);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -276,16 +274,6 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
     }
   }, [focusedOptionIndex, filteredOptions, setFocusedOption]);
 
-  React.useEffect(() => {
-    const index = focusedOption
-      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)
-      : -1;
-
-    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {
-      setFocusedOption(filteredOptions[0]);
-    }
-  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, setFocusedOption]);
-
   useGlobalEventListener(document, 'click', handleClickOutside);
 
   const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {