Showing selected option on top view

[hyphen1370]

Hello,

I am using the latest version of react-select. I am seeing default behavior to show the selected option at the buttom of the menu view like this

Is there any way to change so that when the menu is open, "Cape Verde" shows where the "Brunei Darussalam" shows in the picture?

Thanks

[ebonow]

You can add an onMenuOpen prop and automatically scroll the focused option to the top.

  const selectRef = useRef();

  const onMenuOpen = () => {
    setTimeout(() => {
      const { focusedOptionRef } = selectRef.current.select;
      focusedOptionRef && focusedOptionRef.scrollIntoView();
     }, 1);
  };

  return <Select ref={selectRef} onMenuOption={onMenuOption} />

Demo: codesandbox

A couple notes about this...

• It's a known issue that the focusMenuRef and menuListRef are not immediately available at the time of onMenuOpen, so you will need a brief setTimeout to add it to the event queue to be called after render. "menuListRef" is null when referenced in onMenuOpen #4243

• There can be a sudden jump in the changing of it being moved to the top, so there maybe a possibility of adjusting the opacity/visibility before and after it happens if you want by accessing the selectRef.current.select.menuListRef.

In any case, this should resolve your use case. If you have any further questions, happy to discuss.

[gino]

Is there already a better recommended way to achieve this? I would also like to display the selected item as the first option, isn't there a way to invoke the scrollIntoView function that is being used under the hood?

scrollIntoView({ block: "start", inline: "start" })

[Devalekarthik]

Is there any way to stop sudden jump in the changing of it being moved to the top..?