New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Menu is closing inside tests #5867
Comments
I tested this locally and as mentioned in the description I also get the same issue. But then I cloned the official repo and after spending some time digging into this I found that there is blurInputOnSelect prop (whose default value depends on if device supports TouchEvent). In test environment this value is always true. But in desktop browser this value is false. When this prop is true (in test enviroment) the blur event is triggered on the input element after selecting an option and hence the menu is closed and the focus is no longer with the input element so the test case fails if we try to consecutively make enter keyboard events and assert for the selected options. To set the value of blurInputOnSelect react-select is using this function here -
I wrote these very simple test cases to check this behavior. Both test cases are passing for me (after setting the above prop to false which doesn't let the onBlur callback to be called). with fireEvent - https://github.com/Krishna8691/react-select-test-cases/blob/main/fire-event.js As per the documentation the blurInputOnSelect is used for this
I am not sure if you can disabled the touch events though within the testing library (cannot find anything about this) but looks like its not a problem on react-select side of things yet there is the above prop which I think maybe is present exactly for this because of the functionality differences on touch and non touch devices possibly not sure :) Edit: I don't see this mentioned anywhere in the documentation maybe worth mentioning in the documentation. |
thanks a lot for the great insight @Krishna8691 |
No problem. I don't think this is a bug or an issue as such so most likely this can be closed. |
I don't see any explicit details or hints about the behavior in the below linked comment of this thread in the documentation. I think and If you @JedWatson also think then let me know I would like to make a contribution towards the documentation regarding this if the behavior is just as expected. Thanks. |
In the browser is fine. I select an option, menu stays open and option populates into select
In my tests however it seems to close at this point
I notice that this line
await userEvent.keyboard("{enter}")
correctly selects the option but closes the menu. I verified this by seeing "called the close!!" being called in my tests. This is only called in the browser when I click outside (as expected). Anything wrong in the component or is it the testing library?The text was updated successfully, but these errors were encountered: