feat: make positional adjustment of the list container better

Author: peter-olom

src/components/Anchor.tsx

@@ -6,13 +6,15 @@ import {
   View,
   type TextStyle,
   Dimensions,
+  Platform,
 } from 'react-native';
 import useStyles from '../hooks/useStyles';
 import ChevronDownIcon from '../icons/ChevronDownIcon';
 import type { IconStyle, LayoutRect, Option } from '../types';
 import Selections from './Selections';
 import CloseIcon from '../icons/CloseIcon';
 import { StyleSheet } from 'react-native';
+import debounce from 'lodash/debounce';
 
 interface Props extends Omit<PressableProps, 'onLayout'> {
   placeholder?: string;
@@ -87,18 +89,31 @@ export default function Anchor({
   const onLayoutRef = useRef(onLayout);
 
   useEffect(() => {
-    const onViewLayout = () => {
+    const updatePosition = () => {
       if (ref.current) {
         ref.current.measure((x, y, width, height, pageX, pageY) => {
           onLayoutRef.current({ x, y, width, height, left: pageX, top: pageY });
         });
       }
     };
-    const subscription = Dimensions.addEventListener('change', onViewLayout);
-    onViewLayout();
+
+    const debouncedUpdate = debounce(updatePosition, 16);
+
+    const subscription = Dimensions.addEventListener('change', debouncedUpdate);
+
+    // Track scroll events on web
+    if (Platform.OS === 'web' && window) {
+      window.addEventListener('scroll', debouncedUpdate, true);
+    }
+
+    updatePosition();
 
     return () => {
       subscription.remove();
+      debouncedUpdate.cancel();
+      if (Platform.OS === 'web') {
+        window.removeEventListener('scroll', debouncedUpdate, true);
+      }
     };
   }, []);
 

src/components/ListContainer.tsx

@@ -37,9 +37,9 @@ export default function ListContainer({
 
   const top = useMemo(() => {
     if (Platform.OS === 'web' && avoidBottom === 'position') {
-      if (height - (position?.y ?? 0) < listHeight + 80) {
-        return height - listHeight - 80;
-      }
+      const maxTop = height - listHeight - 80;
+      const preferredTop = position?.y ?? 0;
+      return Math.min(preferredTop, maxTop);
     }
     return position?.y ?? 0;
   }, [height, listHeight, position?.y, avoidBottom]);
@@ -59,7 +59,7 @@ export default function ListContainer({
             left,
             right,
             maxHeight: 400,
-            position: 'absolute',
+            position: 'fixed' as any, // this style is only applied on web
             paddingVertical: tokens.size.sm,
             marginTop: tokens.size.xl + tokens.size.sm,
             gap: tokens.size.sm,

tsconfig.json

@@ -2,14 +2,19 @@
   "compilerOptions": {
     "rootDir": ".",
     "paths": {
-      "@devrue/rn-select": ["./src/index"]
+      "@devrue/rn-select": [
+        "./src/index"
+      ]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext",
+      "DOM"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
@@ -25,4 +30,4 @@
     "target": "esnext",
     "verbatimModuleSyntax": true
   }
-}
+}