Creatable select isn't working after upgrades.

[santanuyogi]

I recently did many upgrades to my project including upgrading React 16 to 17, Next.js 9 to 12, React Select 4 to 5, React Testing Library from 11 to 12. Now my tests are failing for creatable selects. I've been scouring the documentation and don't see any changes that would break this, but maybe I'm missing something. This is happening in every instance that I'm using selectEvent.create. Tests that once passed, no longer pass.

This used to work...

await selectEvent.create(screen.getByLabelText('Location'), 'My Home');

Now it is giving me this error...

 Unable to find an element with the text: My Home. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <div
      style="display: flex; flex-direction: row; width: 100%;"
    >
      <div
        class=" css-fyq6mk-container"
      >
        <span
          class="css-1f43avz-a11yText-A11yText"
          id="react-select-5-live-region"
        />
        <span
          aria-atomic="false"
          aria-live="polite"
          aria-relevant="additions text"
          class="css-1f43avz-a11yText-A11yText"
        />
        <div
          class=" css-1mswgey-control"
        >
          <div
            class=" css-319lph-ValueContainer"
          >
            <div
              class=" css-1pndypt-Input"
              data-value="My Home"
            >
              <input
                aria-autocomplete="list"
                aria-controls="react-select-5-listbox"
                aria-expanded="true"
                aria-haspopup="true"
                aria-label="Location"
                aria-owns="react-select-5-listbox"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                class=""
                id="react-select-5-input"
                role="combobox"
                spellcheck="false"
                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                tabindex="0"
                type="text"
                value="My Home"
              />
            </div>
          </div>
          <div
            class=" css-1hb7zxy-IndicatorsContainer"
          >
            <div
              aria-hidden="true"
              class=" css-tlfecz-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
                />
              </svg>
            </div>
            <span
              class=" css-1okebmr-indicatorSeparator"
            />
            <div
              aria-hidden="true"
              class=" css-tlfecz-indicatorContainer"
            >
              <svg
                aria-hidden="true"
                class="css-tj5bde-Svg"
                focusable="false"
                height="20"
                viewBox="0 0 20 20"
                width="20"
              >
                <path
                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
                />
              </svg>
            </div>
          </div>
        </div>
        <div
          class=" css-h3hghp-menu"
          id="react-select-5-listbox"
        >
          <div
            class=" css-1b8imda-MenuList"
          >
            <div
              aria-disabled="false"
              class=" css-mha7t3-option"
              id="react-select-5-option-1"
              tabindex="-1"
            >
              Create "My Home"
            </div>
          </div>
        </div>
        <input
          name="Location"
          type="hidden"
          value="[object Object]"
        />
      </div>
    </div>

      66 |     );
      67 |
    > 68 |     await selectEvent.create(screen.getByLabelText('Location'), 'My Home');
         |     ^
      69 |     const newLocationInput = screen.getByLabelText('New Location');
      70 |     expect(newLocationInput).toHaveValue('My Home');
      71 |     expect(newLocationInput).toHaveProperty('disabled', true);

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:182:27)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
      at Object.create (node_modules/react-select-event/lib/react-select-event.cjs.js:136:15)
      at Object.<anonymous> (src/components/modules/formElements/selectInputs/LocationSelector/__tests__/LocationSelector.test.js:68:5)

The creatable select is working in real life, but it's not passing the tests.
What am I doing wrong?

[nvegater]

I have the same issue.

[Serzhs]

I managed to fix this by just changing the input in React Testing Library:

await selectEvent.openMenu(screen.getByLabelText('My Select'));

fireEvent.change(screen.getByLabelText('My Select'), {
    target: {
        value: 'Hello World'
    }
})

await selectEvent.select(screen.getByLabelText('Tag list'), ['+ Add "Hello World" ']);

Hope it helps

[curtvict]

Yeah, we just ran into this too. Interestingly enough it was when we were replacing our usage of React Bootstrap's modal with our own implementation. I'm thinking it could be due to our usage of a context wrapping our new modal.

[sheam]

I don't think we have ever been able to get this to work even in a simple scenario. Currently using react-select-event 4.2.0, react-select 4.2.1, and react 16.14.0. Maybe we are doing something wrong?

  return (
    <>
      <label htmlFor={'CategoryInput'}>Select Category</label>
      <Creatable
        inputId={'CategoryInput'}
        value={null}
        options={[]}
        isSearchable={false}
        onCreateOption={props.handleCreateCallback}
      />
    </>
  );

And my test is as follows:

    const dropDownInput = render.getByLabelText('Select Category');
    await create(dropDownInput, 'some text', { autoSelect: false });
    expect(mockHandleCreate).toHaveBeenCalledWith('some text');

The test fails as my onCreate mock never gets called.

For further verification I put a breakpoint in a dummy handler, and verified that it never gets called during the test either.

  const handleCreate = useCallback((inputValue: string): void => {
    console.log(inputValue);
  }, []);

  return (
    <>
      <label htmlFor={'CategoryInput'}>Select Category</label>
      <Creatable
        inputId={'CategoryInput'}
        value={null}
        options={[]}
        isSearchable={false}
        onCreateOption={handleCreate}
      />
    </>
  );

I have also tried using react-select-event v 5.x but it makes no difference. Did anyone else ever solve this?