Fix ESLint errors

Author: witoszekdev

src/components/BaseSelect/useHighlightedIndex.ts

@@ -1,5 +1,5 @@
 import { UseComboboxStateChange, UseSelectStateChange } from "downshift";
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Option } from "~/components/BaseSelect";
 
@@ -12,31 +12,33 @@ export function useHighlightedIndex<T extends Option>(
     change: UseComboboxStateChange<T> | UseSelectStateChange<T>
   ) => void;
 } {
-  // Initially we don't show any item as highlighted
-  const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(
-    -1
-  );
-
-  // When data from API comes we can calculate initially highlighted index
-  // Or when we change the selected item
-  useEffect(() => {
-    // If we don't have selected item leave highlighted index as -1
-    if (!selectedItem || highlightedIndex !== -1) {
-      return;
-    }
-
-    // Find highlighted index in items to select base on selected item value
-    // If there is no match, leave highlighted index as -1
-    setHighlightedIndex(getIndexToHighlight(items, selectedItem));
-  }, [highlightedIndex, items, selectedItem]);
+  // Derive highlighted index from items and selectedItem
+  // This automatically updates when items array changes (e.g., API data arrives)
+  const derivedHighlightedIndex = useMemo(() => {
+    if (!selectedItem) return -1;
+    return getIndexToHighlight(items, selectedItem);
+  }, [items, selectedItem]);
+
+  // Track whether user has interacted with keyboard navigation
+  // undefined means we should use the derived index
+  const [userHighlightedIndex, setUserHighlightedIndex] = useState<
+    number | undefined
+  >(undefined);
+
+  // Use user-set index if available, otherwise use derived index
+  const highlightedIndex =
+    userHighlightedIndex !== undefined
+      ? userHighlightedIndex
+      : derivedHighlightedIndex;
 
   const handleHighlightedIndexChange = ({
-    highlightedIndex,
+    highlightedIndex: newIndex,
   }: UseComboboxStateChange<T> | UseSelectStateChange<T>) => {
-    if (selectedItem && highlightedIndex === -1) {
-      setHighlightedIndex(getIndexToHighlight(items, selectedItem));
+    if (selectedItem && newIndex === -1) {
+      // When Downshift resets to -1, fall back to derived index
+      setUserHighlightedIndex(undefined);
     } else {
-      setHighlightedIndex(highlightedIndex);
+      setUserHighlightedIndex(newIndex);
     }
   };
 

src/components/Combobox/Dynamic/DynamicCombobox.tsx

@@ -107,22 +107,22 @@ const DynamicComboboxInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
-    shouldUpdate: isOpen,
-  });
+  const { setReferenceRef, setFloatingRef, floatingStyles } =
+    useFloating<HTMLLabelElement>({
+      shouldUpdate: isOpen,
+    });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
-  const inputProps = getInputProps({
-    id,
-    ref,
-  });
+  // Downshift requires ref for input focus management - it assigns, not reads, during render
+  // eslint-disable-next-line react-hooks/refs
+  const inputProps = getInputProps({ id, ref });
 
   return (
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.reference}
+        ref={setReferenceRef}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -167,7 +167,7 @@ const DynamicComboboxInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: setFloatingRef })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Combobox/Static/Combobox.tsx

@@ -98,20 +98,20 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
-    shouldUpdate: isOpen,
-  });
+  const { setReferenceRef, setFloatingRef, floatingStyles } =
+    useFloating<HTMLLabelElement>({
+      shouldUpdate: isOpen,
+    });
 
-  const inputProps = getInputProps({
-    id,
-    ref,
-  });
+  // Downshift requires ref for input focus management - it assigns, not reads, during render
+  // eslint-disable-next-line react-hooks/refs
+  const inputProps = getInputProps({ id, ref });
 
   return (
     <Box display="flex" flexDirection="column">
       <ComboboxWrapper
         id={id}
-        ref={refs.reference}
+        ref={setReferenceRef}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -159,7 +159,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: setFloatingRef })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Multiselect/Dynamic/DynamicMultiselect.tsx

@@ -114,22 +114,21 @@ const DynamicMultiselectInner = <T extends Option>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
-    shouldUpdate: isOpen,
-  });
+  const { setReferenceRef, setFloatingRef, floatingStyles } =
+    useFloating<HTMLLabelElement>({
+      shouldUpdate: isOpen,
+    });
 
   const scrollRef = useInfinityScroll(onScrollEnd);
 
-  const inputProps = getInputProps({
-    id,
-    ref,
-    value: inputValue,
-  });
+  // Downshift requires ref for input focus management - it assigns, not reads, during render
+  // eslint-disable-next-line react-hooks/refs
+  const inputProps = getInputProps({ id, ref, value: inputValue });
 
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
-        ref={refs.reference}
+        ref={setReferenceRef}
         id={id}
         typed={typed}
         active={active}
@@ -211,7 +210,7 @@ const DynamicMultiselectInner = <T extends Option>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: setFloatingRef })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Multiselect/Static/Multiselect.tsx

@@ -105,21 +105,20 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
-    shouldUpdate: isOpen,
-  });
+  const { setReferenceRef, setFloatingRef, floatingStyles } =
+    useFloating<HTMLLabelElement>({
+      shouldUpdate: isOpen,
+    });
 
-  const inputProps = getInputProps({
-    id,
-    ref,
-    value: inputValue,
-  });
+  // Downshift requires ref for input focus management - it assigns, not reads, during render
+  // eslint-disable-next-line react-hooks/refs
+  const inputProps = getInputProps({ id, ref, value: inputValue });
 
   return (
     <Box display="flex" flexDirection="column">
       <MultiselectWrapper
         id={id}
-        ref={refs.reference}
+        ref={setReferenceRef}
         typed={typed}
         active={active}
         disabled={disabled}
@@ -194,7 +193,7 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: setFloatingRef })}
           >
             {isOpen &&
               itemsToSelect?.map((item, index) => (

src/components/Select/Select.tsx

@@ -114,9 +114,10 @@ const SelectInner = <T extends Option, V extends Option | string>(
     onBlur,
   });
 
-  const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
-    shouldUpdate: isOpen,
-  });
+  const { setReferenceRef, setFloatingRef, floatingStyles } =
+    useFloating<HTMLLabelElement>({
+      shouldUpdate: isOpen,
+    });
 
   const labelColor = useMemo((): TextProps["color"] => {
     if (error) {
@@ -143,7 +144,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
         className={className}
         getLabelProps={getLabelProps}
         getToggleButtonProps={() =>
-          getToggleButtonProps({ ref: refs.reference })
+          getToggleButtonProps({ ref: setReferenceRef })
         }
       >
         <Box height={getBoxHeight(size)} {...props} ref={ref} display="flex">
@@ -176,7 +177,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
           <List
             as="ul"
             className={listStyle}
-            {...getMenuProps({ ref: refs.floating })}
+            {...getMenuProps({ ref: setFloatingRef })}
           >
             {isOpen &&
               options?.map((item, index) => (

src/components/Textarea/Textarea.tsx

@@ -62,7 +62,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       typed,
     } = useStateEvents(value, onChange);
     const textAreaRef = useRef<HTMLTextAreaElement>(null);
-    useAutoHeightTextarea(textAreaRef.current, value, rows, maxRows);
+    useAutoHeightTextarea(textAreaRef, value, rows, maxRows);
     useImperativeHandle(ref, () => textAreaRef.current!);
 
     return (

src/hooks/useAutoHeightTextarea.ts

@@ -1,34 +1,33 @@
-import { useEffect } from "react";
+import { RefObject, useEffect } from "react";
+
 import { TextareaValue } from "../components/Textarea/TextareaWrapper";
 
 // Updates the height of a <textarea> when the value changes.
 export const useAutoHeightTextarea = (
-  textAreaRef: HTMLTextAreaElement | null,
+  textAreaRef: RefObject<HTMLTextAreaElement>,
   value: TextareaValue,
   rows: number,
   maxRows: number
 ) => {
-  const intialHeight = getHeight(textAreaRef, rows);
-  const maxRowsHeight = getHeight(textAreaRef, maxRows);
-
   useEffect(() => {
-    if (textAreaRef) {
-      // Restart the height at 0px to ensure that the scroll height is correct.
-      textAreaRef.style.height = "0px";
+    const element = textAreaRef.current;
+    if (!element) return;
+
+    const initialHeight = getHeight(element, rows);
+    const maxRowsHeight = getHeight(element, maxRows);
+
+    // Restart the height at 0px to ensure that the scroll height is correct.
+    element.style.height = "0px";
 
-      // Take the max of the initial height and the scroll height for case where rows is greater than one.
-      const initMaxHeight = Math.max(intialHeight, textAreaRef.scrollHeight);
-      // Take the scroll height but limit it to the max rows height.
-      const scrollHeight = Math.min(initMaxHeight, maxRowsHeight);
+    // Take the max of the initial height and the scroll height for case where rows is greater than one.
+    const initMaxHeight = Math.max(initialHeight, element.scrollHeight);
+    // Take the scroll height but limit it to the max rows height.
+    const scrollHeight = Math.min(initMaxHeight, maxRowsHeight);
 
-      textAreaRef.style.height = `${scrollHeight}px`;
-    }
-  }, [intialHeight, maxRowsHeight, textAreaRef, value]);
+    element.style.height = `${scrollHeight}px`;
+  }, [textAreaRef, value, rows, maxRows]);
 };
 
-function getHeight(textAreaRef: HTMLTextAreaElement | null, rows: number) {
-  if (textAreaRef) {
-    return parseFloat(getComputedStyle(textAreaRef).lineHeight) * rows;
-  }
-  return 0;
+function getHeight(element: HTMLTextAreaElement, rows: number) {
+  return parseFloat(getComputedStyle(element).lineHeight) * rows;
 }

src/hooks/useFloating.ts

@@ -18,7 +18,8 @@ export const useFloating = <T extends ReferenceType>({
   shouldUpdate,
 }: UseFloatingProps): {
   floatingStyles: UseFloatingReturn<T>["floatingStyles"] & { zIndex: number };
-  refs: UseFloatingReturn<T>["refs"];
+  setReferenceRef: (node: T | null) => void;
+  setFloatingRef: (node: HTMLElement | null) => void;
 } => {
   const { floatingStyles, refs, update } = useFloatingHook<T>({
     strategy: "fixed",
@@ -37,14 +38,19 @@ export const useFloating = <T extends ReferenceType>({
     ],
   });
 
+  // Use floating-ui's provided callback refs
+  const setReferenceRef = refs.setReference;
+  const setFloatingRef = refs.setFloating;
+
   useLayoutEffect(() => {
     if (shouldUpdate && refs.reference.current && refs.floating.current) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [shouldUpdate, refs, update]);
 
   return {
-    refs,
+    setReferenceRef,
+    setFloatingRef,
     floatingStyles: {
       ...floatingStyles,
       zIndex: zIndexValue,

src/hooks/useInfinityScroll.ts

@@ -1,16 +1,14 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 export const useInfinityScroll = (onScrollEnd?: () => void) => {
   const observerTarget = useRef<HTMLElement | null>(null);
-  const [isIntersecting, setIsIntersecting] = useState(false);
   const observer = useRef<IntersectionObserver | null>(null);
+  const callbackRef = useRef(onScrollEnd);
 
+  // Keep callback ref updated to avoid stale closures
   useEffect(() => {
-    if (isIntersecting) {
-      onScrollEnd?.();
-      setIsIntersecting(false);
-    }
-  }, [isIntersecting, onScrollEnd]);
+    callbackRef.current = onScrollEnd;
+  }, [onScrollEnd]);
 
   useEffect(() => {
     const target = observerTarget.current;
@@ -26,7 +24,8 @@ export const useInfinityScroll = (onScrollEnd?: () => void) => {
     observer.current = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting) {
-          setIsIntersecting(true);
+          // Call callback directly instead of using state as trigger
+          callbackRef.current?.();
         }
       },
       { threshold: 0 }