In the antdesign Select component, if you allow the user to type in the search field to find various options, the first option will be autofocused by default. This means the user can simply press enter to select it.
In the Treeselect component, this doesn’t happen and there doesn’t seem to be a standard way to accomplish it. But it would be much more helpful here, because if you want to allow the user to select many things after the other, it would be much easier if you can just press enter after you have typed in the first few letters.
I have tried a few different solutions, including a keydown event which didn’t do anything:
useEffect(() => {
if (searchValue) {
const input = document.querySelector('#treeSelectId');
input.focus();
// Simulate arrow down key to navigate to the first matching option
const event = new KeyboardEvent('keydown', {
key: 'ArrowDown',
bubbles: true,
cancelable: true,
});
input.dispatchEvent(event);
}
}, [searchValue]);
Any suggestions welcome.