fix: unlock scrolling when radix select dropdown open

Author: jamiehenson

src/components/Layout/LanguageSelector.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
-import * as Select from '@radix-ui/react-select';
 import Badge from '@ably/ui/core/Badge';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
@@ -12,6 +11,7 @@ import { LanguageKey } from 'src/data/languages/types';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { navigate } from '../Link';
 import { LANGUAGE_SELECTOR_HEIGHT, INKEEP_ASK_BUTTON_HEIGHT } from './utils/heights';
+import * as Select from '../ui/Select';
 import { Skeleton } from '../ui/Skeleton';
 
 type LanguageSelectorOptionData = {
@@ -92,7 +92,7 @@ export const LanguageSelector = () => {
 
         <Select.Portal>
           <Select.Content
-            className="overflow-hidden bg-neutral-000 shadow dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-lg ui-shadow-sm-soft z-50"
+            className="overflow-hidden bg-neutral-000 shadow dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-lg ui-shadow-sm-soft z-40"
             position="popper"
             align="end"
             sideOffset={4}

src/components/ui/Select.tsx

@@ -0,0 +1,50 @@
+import { useLayoutEffect } from 'react';
+import * as RadixSelect from '@radix-ui/react-select';
+
+// Radix Select insists on locking scrolling when the dropdown is open. This is a workaround to unlock scrolling.
+const useScrollUnlock = () => {
+  useLayoutEffect(() => {
+    const TYPE_LIST = ['wheel', 'scroll', 'touchmove'] as const;
+    const stopper = (e: Event) => e.stopImmediatePropagation();
+
+    const unlockScroll = () => {
+      TYPE_LIST.forEach((type) => {
+        window.addEventListener(type, stopper, { capture: true, passive: false });
+      });
+      document.body.removeAttribute('data-scroll-locked');
+    };
+
+    const cleanupListeners = () => {
+      TYPE_LIST.forEach((type) => {
+        window.removeEventListener(type, stopper, { capture: true });
+      });
+    };
+
+    const mo = new MutationObserver((mutations) => {
+      // Only react if data-scroll-locked was added
+      const wasLocked = mutations.some(
+        (m) => m.type === 'attributes' && document.body.hasAttribute('data-scroll-locked'),
+      );
+      if (wasLocked) {
+        cleanupListeners();
+        unlockScroll();
+      }
+    });
+
+    mo.observe(document.body, { attributes: true, attributeFilter: ['data-scroll-locked'] });
+
+    return () => {
+      mo.disconnect();
+      cleanupListeners();
+    };
+  }, []);
+};
+
+const Root = (props: RadixSelect.SelectProps) => {
+  useScrollUnlock();
+  return <RadixSelect.Root {...props} />;
+};
+
+// Re-export everything from Radix Select, then override Root
+export * from '@radix-ui/react-select';
+export { Root };