5.1.0 changes wrong input when using querySelector and multiple select

[fonji]

Since 5.1.0, using querySelector fails when having multiple inputs with the same options.
.select will change the first select that have the option available.

I couldn't debug it, but here's a test case hoping it will help.

Thank you for the awesome work and have a nice day!

[fonji]

this will fail, as foodForTuesday is ""

[romgain]

Hey @fonji !

Sorry for taking so long to come back to you.

The issue in this case is that you're not targeting the right input field with your querySelector:

const tuesdayInput = container.querySelector('input[name="foodForTuesday"]');
debug(tuesdayInput);

// prints out:
    <input
      name="foodForTuesday"
      type="hidden"
      value=""
    />

That's a hidden input created under the hood by react-select, and not what we need in this case.

That's why we recommend using getByLabelText instead: it's better at finding the "good" elements.
If I tweak your test to use getByLabelText, everything works as expected:

const tuesdayInput = getByLabelText('Food for tuesday');
debug(tuesdayInput);

// prints out:
    <input
      aria-autocomplete="list"
      autocapitalize="none"
      autocomplete="off"
      autocorrect="off"
      id="food-for-tuesday"
      spellcheck="false"
      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
      tabindex="0"
      type="text"
      value=""
    />

^ That one is the correct element, and the test passes just fine.

---

I know it's been a while, but let me know if you have any questions!

[fonji]

Oh, of course! Thank you!
I should have checked that myself...
Have a nice day!

[romgain]

No probs! Have a great day 😄