Polaris-react: Select component marks first option as selected when value doesn't match an available option

[andrewpye]

Issue summary

If a value is passed into a Select component that doesn't match one of the available options (e.g. a null from a newly-initialised value), the first option is automatically flagged as selected. This means that the first option cannot be selected until after the user has selected one of the other options first:

Source for the above GIF is here.

Expected behavior

For Select components with a placeholder, the placeholder should be marked as selected when no option matching the passed-in value is present. For Select components without a placeholder, no item should be marked as selected.

Actual behavior

When a value that doesn't match any of the passed-in options is passed into a Select, the first option is marked as selected which makes it impossible to select without first selecting a different option. If there are no other options to select, it becomes impossible to select an option at all, which may for instance leave the form in an invalid state which is impossible for the user to correct.

Steps to reproduce the problem

Set up a Select with a value which doesn't match any of the passed-in options. See sandbox example.

Reduced test case

Sandbox example here.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 2.12.1
• Browser: Chrome Version 69.0.3497.100 (Official Build) (64-bit)
• Device: MacBook Pro
• Operating System: macOS Sierra Version 10.12.6

[ry5n]

Good catch. The behavior I would expect when the passed value doesn’t match any options is that the first option is actually selected, rather than only appearing to be selected. I believe this would match the behavior of the underlying native <select> element. Does that match your expectations @andrewpye?

[BPScott]

The behavior I would expect when the passed value doesn’t match any options is that the first option is actually selected, rather than only appearing to be selected. I believe this would match the behavior of the underlying native <select> element.

Confirming that this matches the native select element behaviour. Following what the native select element does is what I would expect too.

[andrewpye]

@ry5n @BPScott thanks for the feedback! Yes, this does match the native select element's behaviour so is maybe the way to go. I guess I found it confusing because I passed in a value which didn't match any options, but ended up with an option being considered selected which didn't match the value I passed into the Select 🤷‍♂️ It's been a long time since I used a plain select element so I'd forgotten about that aspect of their behaviour 🤦‍♂️

I suppose the thing here is that it's the outside world's responsibility to ensure a value that matches the available options is always passed in - in my case I've updated our app to pass myValue || '' instead of just myValue to ensure the placeholder's always checked when myValue is null/undefined etc. I'm happy to close this issue if you guys think this is OK 👍

[tmlayton]

@andrewpye I think that implementation is okay. Going to close this issue for now, feel free to upvote 👍 if you think this should be reconsidered.

[andrewpye]

Sounds good, thanks @tmlayton 🙂

[tmlayton]

@andrewpye sorry for the confusion, I meant to say upvote on the issue description 😄

[andrewpye]

@tmlayton yup understood, my thumbs-up was more of an acknowledgement of/thanks for your response 😉 I'm happy leaving this as-is for the time being 🙂