How to I focus on the top option after inputChange?

[iffy]

How do I set the focused option after an inputChange event?

For example, I have two options:

• Electricity
• Charity

I then do the following:

Action	Input value	Visible options	Focused option
Press c	c	Electricity, Charity	Electricity
Press h	ch	Charity	Charity
Press backspace	c	Electricity, Charity	Charity

I want Electricity to be focused in the last state so that for a given input value (c in this case) the user can reliably count on which option will be chosen no matter what was typed beforehand. In my specific case, I always want the first option to be focused after an inputChange event. If the user presses up/down, they can choose a different option, but if the inputValue is changed, always focus on the top option.

Example showing the problem: https://codesandbox.io/s/jovial-wozniak-kfd2hg?file=/src/App.js

Any ideas?

I searched through the discussions and this is the closest I could find to a similar discussion: #4485