fix(fields): fix pointer-events in Select

e2e/release/sample/package.json

@@ -20,25 +20,13 @@
   },
   "devDependencies": {
     "@tsconfig/vite-react": "3.0.2",
-    "@types/node": "22.5.5",
-    "@types/react": "18.3.8",
+    "@types/node": "22.7.0",
+    "@types/react": "18.3.9",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.3.1",
     "prettier": "3.3.3",
-    "typescript": "4.9.5",
-    "vite": "5.4.7",
+    "typescript": "5.6.2",
+    "vite": "5.4.8",
     "vite-tsconfig-paths": "5.0.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

src/fields/Select.tsx

@@ -1,6 +1,6 @@
 import { getSelectedOptionValueFromSelectedRsuiteDataItemValue } from '@utils/getSelectedOptionValueFromSelectedRsuiteDataItemValue'
 import classnames from 'classnames'
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { SelectPicker as RsuiteSelectPicker, type SelectPickerProps as RsuiteSelectPickerProps } from 'rsuite'
 
 import { StyledRsuitePickerBox } from './shared/StyledRsuitePickerBox'
@@ -133,6 +133,37 @@ export function Select<OptionValue extends OptionValueType = string>({
     [controlledRsuiteData, rsuiteData]
   )
 
+  const listProps = useMemo(
+    () =>
+      originalProps.virtualized
+        ? {
+            onItemsRendered: () => {
+              setTimeout(() => {
+                if (!boxRef.current) {
+                  return
+                }
+
+                const divs = boxRef.current!.querySelectorAll(`#${originalProps.name}-listbox div`)
+                const targetDiv = divs[2]
+
+                /**
+                 *  Reset the 'pointer-events' style
+                 *  @see:
+                 *  https://github.com/MTES-MCT/monitorfish/issues/3211
+                 *  https://github.com/bvaughn/react-window/issues/128
+                 */
+                if (targetDiv) {
+                  requestAnimationFrame(() => {
+                    ;(targetDiv as HTMLDivElement).style.pointerEvents = 'auto'
+                  })
+                }
+              }, 300)
+            }
+          }
+        : {},
+    [originalProps.virtualized, originalProps.name]
+  )
+
   useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange)
 
   useEffect(() => {
@@ -165,6 +196,7 @@ export function Select<OptionValue extends OptionValueType = string>({
             disabled={disabled}
             disabledItemValues={disabledItemValues}
             id={originalProps.name}
+            listProps={listProps}
             onChange={handleChange}
             onSearch={handleSearch}
             // `as any` because we customized `ItemDataType` type by adding `optionValue`,

stories/fields/Select/WithCustomSearch.stories.tsx

@@ -43,7 +43,8 @@ const meta: Meta<SelectProps<Specy>> = {
 
   decorators: [
     generateStoryDecorator({
-      withBackgroundButton: true
+      withBackgroundButton: true,
+      withNewWindowButton: true
     })
   ]
 }