Option to force blur on Combobox.Input when clicking Combobox.Option

[keithradford]

When Combobox is used as a part of a form that has validation rules, the state can get out of sync with what users see. This is because the component stays focused after selecting an option.

The video I attached showcases this. The Submit button is disabled until the form is valid, but that state isn't detected until the Combobox is blurred, which I don't want users to have to.

Is there an easy way to accomplish this that I missed? Would a blurOnClick prop make sense (or be possible)?

Screen.Recording.2023-10-10.at.2.53.25.PM.mov

[omattman]

+1 on this.

There does not seem to be any clear solution as to how you would blur the input and especially not when used in conjunction with form packages.

I have tried to force blur through the document and refs but still nothing seems viable.

[topical]

The same problem occurred on mobiles #1555. There was even a fix #1732.

For unknown reasons, #2272 added this problem again: whenever you chose an option, the input element is forcefully focused. As this is especially nasty on mobiles where you get a virtual keyboard whenever the user has selected an option, the setting focus is done on non-mobiles only.

If you take a look at #2272 you see that the focus is added using a requestAnimationFrame() delay. This makes it very hard to override.

The only viable solution I see is to make the #2272 hack optional.

[Mil05h]

@keithradford It can be done by forcing blur through the document and refs. Only thing it needs to be in setTimeout like so
setTimeout(() => inputRef.current?.blur(), 0);
or it will not work.