value attribute in DOM for <Select> element is not updating after selecting a dropdown item

[cliffordfajardo]

Reproduction link

Steps to reproduce

1.Choose a dropdown item from the <Select> element and observe that the value attribute of the <input> element associated with the <Select> in the DOM does not get updated with the value that was selected ↓

Live Example:

• https://stackblitz.com/edit/react-ts-k6vgjh?file=App.tsx

A strange behavior I observed is that if you type into the <Select> input box, it will update the value attribute of the <input> element associated with the <Select> but as soon as you select an item from the dropdown the value attribute clears (see video above ↑)

What is expected?

1. After I select a value from the dropdown, it should update the value attribute on the <input> element in the DOM.
2. Putting defaultValue="some_value" on the <Select> should add value="some_value" on the underlying <input> element that gets rendered in the DOM.
   • i think we need to modify Input.tsx file so it value prop gets updated on changes?

Why is this important?

If you are submitting a <form> the form will not be able to detect that the our<Select> element has value set on it because value attribute of the <input> in the DOM has not been updated

[cliffordfajardo]

The rendered HTML of <Select> renders an<input> element.
The bug seems to be that after selecting an option from <Select> the <input> value property is not getting updated.

CleanShot.2022-07-13.at.06.20.07.mp4

[cliffordfajardo]

CC @zombieJ @yiminghe @MadCcc

[afc163]

<input /> element in Select just for search function, rather than value carrier of Select.

[cliffordfajardo]

Hey @afc163,
Thanks for adding more context into how the <Select> internals work

I started thinking more about a backwards compatible approach towards having <Select> be <form> compatible
I've closed this issue and created a new Github issue: ___