They way DropDownMenu is currently built, it won't work with a lot of form libraries. Also, it has severe restrictions that a standard <select> has not.
Three main points:
You cannot assign a default onChange listener from a lib (e.g. from formik or redux-form, because onChangeValue just returns the value, not a normal form field event
If the form re-renders, the selected option is lost - and there is no way to set it. You would have to reshuffle the values prop in order to display the correct selected option again?
Values equal display text
For example, you can assign <option> elements a value and a text. So the value can be independent of the display text (which is good for Intl). With the current architecture, you would have to map the return value for all languages to get a programmatic value you can work with.
Is there any chance to rebuild the component as a standard select field? Or maybe just include a select field that is hidden, and extract the options from there?
Link to minimal working code that reproduces the issue
Problem description
They way DropDownMenu is currently built, it won't work with a lot of form libraries. Also, it has severe restrictions that a standard
<select>has not.Three main points:
formikorredux-form, becauseonChangeValuejust returns the value, not a normal form field event<option>elements a value and a text. So the value can be independent of the display text (which is good for Intl). With the current architecture, you would have to map the return value for all languages to get a programmatic value you can work with.Is there any chance to rebuild the component as a standard select field? Or maybe just include a select field that is hidden, and extract the options from there?
Link to minimal working code that reproduces the issue
n. a.
Versions