Hi, I'm experiencing an issue: with a Select of the typeahead (single) variant, the first render after making a selection displays the item's value, not its textContent, as the "typeaheadValue" inside the input. However, the second render replaces the value with the proper text.
From the user's perspective, it looks like this:
- Click on the select's arrow to see the available options
- Click on one of the options to select it → a different text (the value) appears as the selection in the input at the top
- Click outside the select to close it → the proper text (the textContent between <SelectOption> and </SelectOption>) appears as the selection - this is what the user expects from the beginning
- Alternatively, clicking the same option twice has the same result - on the second render, the option's text, not value, is rendered
I think it has something to do with this fix: #3096
The linked change appears to "fix" setting the selections from outside by using the selections value as the type-ahead text. However, this seems to assume that the value and the displayed option text are always the same, which looks like an unreasonable assumption to make.
Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Here's a minimal example that shows the weird behavior: https://codesandbox.io/s/unruffled-chandrasekhar-idl9j?file=/src/App.tsx
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
This is a bug that has no work-around that I know of, as having a different option value and option text is absolutely necessary (values are often not human-readable).
Is there any other way to make this work? I've tried not setting selections and letting the Select component manage this internally, but this results in the input not updating at all (i.e. no user feedback as to which option is selected).
What is your product and what release version are you targeting?
Our product is an admin-type GUI and we're on react-core 3.153.3, though this is reproducible on newer versions also (as seen in the sample code linked above).
Hi, I'm experiencing an issue: with a Select of the typeahead (single) variant, the first render after making a selection displays the item's value, not its textContent, as the "typeaheadValue" inside the input. However, the second render replaces the value with the proper text.
From the user's perspective, it looks like this:
I think it has something to do with this fix: #3096
The linked change appears to "fix" setting the selections from outside by using the selections value as the type-ahead text. However, this seems to assume that the value and the displayed option text are always the same, which looks like an unreasonable assumption to make.
Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Here's a minimal example that shows the weird behavior: https://codesandbox.io/s/unruffled-chandrasekhar-idl9j?file=/src/App.tsx
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
This is a bug that has no work-around that I know of, as having a different option value and option text is absolutely necessary (values are often not human-readable).
Is there any other way to make this work? I've tried not setting selections and letting the Select component manage this internally, but this results in the input not updating at all (i.e. no user feedback as to which option is selected).
What is your product and what release version are you targeting?
Our product is an admin-type GUI and we're on react-core 3.153.3, though this is reproducible on newer versions also (as seen in the sample code linked above).