How show Highlighted options in react-select - reactjs

Question

I am using react-select. But I don't know how to get the value of the currently highlighted option from the list options.
E.g. if a user pressed the key down or up button, I want to know which option is selected.
I haven't found any usable props in the documentation.
Not looking solutions like below.
Get value of highlighted option in React-Select

Answer 1

Sadly the library doesn't provide such a feature. However it applies the [class-prefix]__option--is-focused to the option that is focused. You can then easily get the value you want by checking classes change in pure Javascript.
This answer implement the class ClassWatcher that enable you to check class addition or removal on a specific node like:
new ClassWatcher(targetNode, 'your-class', onClassAdd, onClassRemoval)
So you could add this watcher to each options of the select by using querySelectorAll on the ref of the select. First step is to initialised the component with a few options and some states like isMenuOpen, focusedValue and the selectedOption:
const OPTIONS = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
export default function App() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const [focusedValue, setFocusedValue] = React.useState("");
const [selectedOption, setSelectedOption] = React.useState(null);
const ref = React.useRef(null);
return (
<div className="App">
<p>Focused value: {focusedValue}</p>
<Select
ref={ref}
classNamePrefix="my-select"
value={selectedOption}
onChange={setSelectedOption}
options={OPTIONS}
isMenuOpen={isMenuOpen}
onMenuOpen={() => setIsMenuOpen(true)}
onMenuClose={() => {
setFocusedValue("");
setIsMenuOpen(false);
}}
/>
</div>
);
}
Now we can use ClassWatcher to update the focusedValue state when the class my-select__option--is-focused change. This as to be done when the ref is not null and when the menu is open so we can use a useEffect hook for that:
React.useEffect(() => {
if (ref && isMenuOpen) {
const menu = ref.current.select.menuListRef;
const options = menu.querySelectorAll(".my-select__option");
// add class watcher to each options
options.forEach((option, index) => {
new ClassWatcher(
option,
"my-select__option--is-focused",
() => setFocusedValue(OPTIONS[index].value),
() => {}
);
});
}
}, [ref, isMenuOpen]);
You can check here the complete example:

Answer 2

The Option component has an isFocused prop you that could be used. I'm looking at injecting a ref into the custom option prop and whenever that option is focus, update the ref to the value of that option.
import React from "react";
import Select, { components, OptionProps } from "react-select";
import { ColourOption, colourOptions } from "./docs/data";
export default () => {
const focusdRef = React.useRef(colourOptions[4]);
const Option = (props: OptionProps<ColourOption>) => {
const { isFocused, data } = props;
if (isFocused) focusdRef.current = data;
return <components.Option {...props} />;
};
return (
<Select
closeMenuOnSelect={false}
components={{ Option }}
styles={{
option: (base) => ({
...base,
border: `1px dotted ${colourOptions[2].color}`,
height: "100%"
})
}}
defaultValue={colourOptions[4]}
options={colourOptions}
onKeyDown={(e) => {
if (e.key === "ArrowRight") {
console.log(focusdRef.current);
}
}}
/>
);
};
So here whenever you press the right arrow, you have access to the current focused value.
code sandbox: