Error Cannot read properties of null (reading 'focus') - radix select

[rishi517]

Bug report

Current Behavior

radix-select.mov

There's a lag/nondetected input when clicking on the select component.

Expected behavior

As seen in the video, the customer should be able to smoothly click through the component without an error.

Reproducible example

N/A

Suggested solution

Add an if statement to see if nextItem.ref.current is null. Seems like this line might be:

This error was emitted by Sentry.

`../../node_modules/@radix-ui/react-select/dist/index.mjs in at line 384:47

const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {
  const enabledItems = getItems().filter((item) => !item.disabled);
  const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);
  const nextItem = findNextItem(enabledItems, search, currentItem);


 if (nextItem) {
    setTimeout(() => nextItem.ref.current.focus()); <----
  }
});
const itemRefCallback = React.useCallback(
  (node, value, disabled) => {
    const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;`

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	select	2.2.5
React	n/a	18.2
Browser	Chrome	136
Assistive tech
Node	n/a
npm/yarn/pnpm	npm	10.8.2
Operating System	windows	>= 10

[jamiter]

Ran into this as well. Is the connected PR (#3820) a good solution and can it be merged?