ComboBox clears defaultInputValue or controlled value on blur

[BMCwebdev]

Provide a general summary of the issue here

When using the ComboBox component with either defaultInputValue or a controlled value, the initial value is cleared when the ComboBox is blurred after tabbing into it. This behavior is problematic in scenarios where pre-filled forms and values may be unknowingly cleared just by tabbing through a form.

🤔 Expected Behavior?

The ComboBox should retain the defaultInputValue or the controlled value on blur, regardless of whether the user interacts with the ComboBox.

😯 Current Behavior

When the ComboBox is rendered with a defaultInputValue or a controlled value:
1. Tabbing into and then blurring out of the ComboBox clears the value.
2. This issue only occurs with the initially rendered value (either defaultInputValue or the initial controlled value).
3. If the user interacts with the ComboBox and selects a value, it is retained on blur as expected.

This issue can be seen on the React Aria documentation site:
ComboBox Documentation
The issue happens with the value examples provided.

💁 Possible Solution

I don't know. Also not sure if there already is a solution 🙂

🔦 Context

This issue affects forms where pre-filled values are common, such as when a user returns to edit saved data. A user tabbing through a form may unknowingly clear values in ComboBoxes without any indication from a screen reader. This can result in unexpected data loss and accessibility concerns, as users with assistive technologies are not informed about the cleared value. Additionally, the user only realizes the value is missing when they refocus on the field or try to submit the form if the field was required.

🖥️ Steps to Reproduce

1. Go to the React Aria ComboBox Documentation.
2. Use the examples with defaultInputValue or a controlled value.
3. Tab into the ComboBox.
4. Tab out of the ComboBox without interacting with it.
5. Observe that the initially rendered value is cleared.

Version

React Aria Components 1.3.3

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

Mac 14.7

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[BMCwebdev]

In looking at more documentation, I think this may be a matter of needing to control defaultSelectedKey or selectedKey as well.
As discussed here.

And here as well

I am assuming when using an asynchronous ComboBox with pre-populated default values and/or selections, it may also require initializing the list object with data fetched from the API (based on the defaultSelectedKey or selectedKey) on the initial render to avoid similar issues?