Selecting multiple options using selectOptions is not working

[Thanga-Ganapathy]

Reproduction example

https://codesandbox.io/s/pedantic-robinson-cchucu?file=/src/App.js

Prerequisites

1. Render a form with submit button using the Form component from "@open-tech-world/react-form".
2. Render a select element using the SelectField from "@open-tech-world/react-form".
3. Add some options to the select and add multiple attribute.
4. Select options using userEvent.selectOptions.
5. Fire click event to the submit button.
6. Check the form values returned from the Form onSubmit handler.

Expected behavior

The userEvent.selectOptions should select multiple options using the provided string array of the values parameter.

Actual behavior

The userEvent.selectOptions selects only the last option from the given string array of the values parameter, even if the multiple attribute is set.

User-event version

14.1.1

Environment

Testing Library framework: @testing-library/[email protected]

JS framework: [email protected]

Test environment: [email protected]

DOM implementation: @testing-library/[email protected]

Additional context

No response

[ph-fritsche]

Thanks for the report.

The [Utility] APIs don't have one-to-one equivalents in a real user interaction.
Their behavior is therefore an interpretation how the "perceived" user interaction might be translated to actual events on the DOM.

The API works on an intrinsic <select> element: https://codesandbox.io/s/red-sun-jmw3hv?file=/src/App.test.js

Someone needs to investigate what exactly throws off the implementation by @open-tech-world/react-form.

[Thanga-Ganapathy]

@ph-fritsche Thanks for the reply.

Yes it is working on the intrinsic elements by default.

Someone needs to investigate what exactly throws off the implementation by @open-tech-world/react-form.

Let me give you some hints about the @open-tech-world/react-form. It internally uses the use-sync-external-store from React to manage the form state.

So, my assumption is that in React concurrent mode, it may skip some state updates when urgent action from the user is expected, and I tried to replicate the same with setTimeout, but I don't know if it is a valid test case. Please ignore it if it's invalid.

Here is the modified intrinsic <select> element: https://codesandbox.io/s/amazing-dawn-lzlzkp?file=/src/App.js

[github-actions]

🎉 This issue has been resolved in version 14.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @Thanga-Ganapathy bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @Thanga-Ganapathy! 🎉