Skip to content

Commit

Permalink
fix(fields): memoize list props
Browse files Browse the repository at this point in the history
  • Loading branch information
louptheron committed Sep 26, 2024
1 parent 13d1955 commit 54c4d3f
Showing 1 changed file with 32 additions and 13 deletions.
45 changes: 32 additions & 13 deletions src/fields/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}
: undefined,
[originalProps.virtualized, originalProps.name]
)

useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange)

useEffect(() => {
Expand Down Expand Up @@ -165,19 +196,7 @@ export function Select<OptionValue extends OptionValueType = string>({
disabled={disabled}
disabledItemValues={disabledItemValues}
id={originalProps.name}
listProps={{
onItemsRendered: () => {
setTimeout(() => {
const divs = boxRef.current.querySelectorAll('.rs-picker-select-menu div')
const targetDiv = divs[5]

// Reset the 'pointer-events' style
if (targetDiv) {
targetDiv.style.pointerEvents = undefined
}
}, 300)
}
}}
listProps={listProps}
onChange={handleChange}
onSearch={handleSearch}
// `as any` because we customized `ItemDataType` type by adding `optionValue`,
Expand Down

0 comments on commit 54c4d3f

Please sign in to comment.