selectOptions by option content

[jsphstls]

https://github.com/testing-library/user-event#selectoptionselement-values

Users do not interact with <select/> elements by the option value because it is not visible. Users typically select by the text content of each option that they can see.

This is possibly a separate issue, but the current example in the readme is unclear about whether the option content or the value is used to select because the values and content are the same.

<option data-testid="val1" value="1">
  1
</option>

userEvent.selectOptions(getByTestId("select-multiple"), ["1", "3"]);

While the example is unclear, there is some text:
The values parameter can be either an array of values or a singular scalar value.

[foxbunny]

I think it would be more in line with the other methods to just do something like this:

userEvent.selectOptions(getByTestId("select-multiple"), [getByText('1'), getByText('3')]);

[jsphstls]

Are there any use cases for using an option selector other than getByText ?

[foxbunny]

I've seen people use data-testid. Personally I prefer using getByText(), but I think being a bit explicit in this case gives you more options, perhaps?

[andypearson]

Hello, I come from Ruby and Rails land, where the syntax for selecting an option using Capybara looks like this:

page.select 'March', from: 'Month'

The option is selected based on the visible text of the <option> not the value.

Docs for this method are here: https://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FNode%2FActions:select

I was, therefore, expecting userEvent.selectOptions to work in a similar fashion and have just spent a good long while trying to work out why my test wasn't working :)

I would agree with @jsphstls that the default behaviour should be selecting by the <option> text, and "special" behaviour should be supported by passing in option nodes directly.

Additionally, if you do something like:

userEvent.selectOptions(getByLabelText("Month"), "Monday")

You don't get a warning that the option value doesn't exist in the <select>, which meant it wasn't obvious to work out that "nothing" was being selected when I called selectOptions.

[kentcdodds]

I think this PR handles this best, so I'll go ahead and close this.