Accessing refs in override components

[Merynek]

Hello,
Can you help me with accessing to ref of all components?
I need these refs for getting real (DOM) elements.
I dont know how can I solve this problem.
I tried this but new Menu component what I create is without base innerRef so it could be a problem, but i dont know another options to get it.

function Menu<T, IsMulti extends boolean, GroupType extends GroupBase<T>>(props: IMenu<T, IsMulti, GroupType>) {
    const ref= useRef<HTMLDivElement|null>(null);

    return (<components.Menu {...props} innerRef={ref}} />);
}

<Select
    components={{
        Menu: Menu 
    }}
/>

[Rall3n]

Hello @Merynek,

replacing the innerRef prop particularly on the Menu component could break functionality.
If you want/need to do this, you should still add the ref to the original innerRef prop.
To do this you create a callback function which you set as the innerRef prop, in which you set both refs.

const Menu = ({ innerRef, ...props }: MenuProps) => {
  const theRef = useRef<HTMLDivElement>(null);
  
  const setRef = useCallback((ref) => {
    theRef.current = ref;
    innerRef(ref);
  }, [innerRef]);  

  return <components.Menu {...props} innerRef={setRef} />
}

[Rall3n]

I cannot confirm this. I tried the same method with an Input component, and had no issues with focus.

[Merynek]

I cannot confirm this. I tried the same method with an Input component, and had no issues with focus.

sorry :-) you are right :-) fixed :-)

[Nantris]

So if I'm reading right, the only way to handle this now is to re-create the custom element on every render?

Edit: It turns out we no longer need the innerRefs because React-Select now stores state at the top level and onChange and onKeyDown can be accessed there as well.

[JanderSilv]

Hey @slapbox , do you have any examples accessing onKeyDown at custom components? Or someway to attach an event listener?

I am replacing the MenuList with a Virtualized list, which causes the loss of keyboard navigation in the list.

[Nantris]

In our case we only needed to access the input, whose onKeyDown didn't used to be exposed at the top level. Sorry to disappoint.

I'd love to see virtualized lists natively supported; maybe you could make a feature request for React Select 6?