Controlled Select label

[ntnp]

Description

The SelectInput component doesn't render its label correctly if you're trying to use Select as a controlled component. Previously we were able to use selectedLabel and it would render that, but now initialLabel only works for the first render.

CodeSandbox/Snack link

https://snack.expo.dev/@ntnp/gluestack-controlled-select

Steps to reproduce

1. Add selectedValue and onValueChange to <Select>.
2. Change the value of selectedValue.
3. The <SelectInput> label will be wrong:
   • If using initialLabel, the label will be frozen with that value until you manually select a different option.
   • If not using initialLabel, the label displayed is the actual value, not the selected option label.

gluestack-ui Version

1.1.9

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [X] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

The third approach in the Snack solves the issue (passing value to <SelectInput>), but it's terrible DX when using react-hook-form.

[surajahmed]

@ntnp Thanks for reporting this. We'll look into this.

[stefan-schweiger]

Has anybody found a solution or workaround for this? Not sure how to continue with that component for forms when the loaded values don't get displayed correctly.

[victorfgama]

same problem here... any solution?