fix(19216): prevent MultiselectChipWithSearch to scroll on item select

konturio · Jul 31, 2024 · f8c1b3f · f8c1b3f
1 parent 74c4101
commit f8c1b3f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx b/packages/ui-kit/src/Select/components/MultiselectChipWithSearch/index.tsx
@@ -117,7 +117,7 @@ export function MultiselectChipWithSearch<I extends SelectableItem>({
     useCombobox({
       items: resultItems,
       itemToString: itemToString,
-      defaultHighlightedIndex: 0, // after selection, highlight the first item.
+      defaultHighlightedIndex: 0,
       selectedItem: null,
       inputValue,
       stateReducer(state, actionAndChanges) {
@@ -129,7 +129,7 @@ export function MultiselectChipWithSearch<I extends SelectableItem>({
             return {
               ...changes,
               isOpen: true, // keep the menu open after selection.
-              highlightedIndex: 0, // with the first option highlighted.
+              highlightedIndex: state.highlightedIndex, // do not reset highlighted index to prevent scroll
             };
           default:
             return changes;

diff --git a/packages/ui-kit/src/Select/index.tsx b/packages/ui-kit/src/Select/index.tsx
@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useSelect } from 'downshift';
 import cn from 'clsx';
-import { SelectButton } from './components/SelectButton';
+import { SelectButton } from './components';
 import { getSelectMode, SELECTION_NODES } from './types';
-import { SelectItem } from './components/SelectItem';
+import { SelectItem } from './components';
 import style from './style.module.css';
-import type { SelectButtonClasses } from './components/SelectButton';
+import type { SelectButtonClasses } from './components';
 import type { UseSelectProps, UseSelectState, UseSelectStateChange, UseSelectStateChangeOptions } from 'downshift';
 import type { SelectableItem, MultiSelectProp } from './types';
 import type { ForwardRefComponent } from '../utils/component-helpers/polymorphic';