fix: Optimize dropdown items rendering on mouse hover (#3102)

cloudscape-design · Dec 6, 2024 · 830d07f · 830d07f
1 parent 6006683
commit 830d07f
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/internal/components/options-list/utils/use-highlight-option.ts b/src/internal/components/options-list/utils/use-highlight-option.ts
@@ -37,9 +37,9 @@ export function useHighlightedOption<OptionType>({
 }: HighlightedOptionProps<OptionType>): [HighlightedOptionState<OptionType>, HighlightedOptionHandlers<OptionType>] {
   const [highlightedIndex, setHighlightedIndexState] = useState(-1);
   const [highlightType, setHighlightType] = useState<HighlightType>(new HighlightType('keyboard'));
-  const setHighlightedIndex = useCallback((index: number, highlightType: HighlightType) => {
+  const setHighlightedIndex = useCallback((index: number, newHighlightType: HighlightType) => {
     setHighlightedIndexState(index);
-    setHighlightType(highlightType);
+    setHighlightType(oldHighlight => (oldHighlight.type !== newHighlightType.type ? newHighlightType : oldHighlight));
   }, []);
 
   const highlightedOption =