without a proper reproducible example I can not confirm if this is an issue with the library or an issue regarding implementation.
In regards to adding an input inside the menu I would redirect you to #3111. This comment has an implementation that is still usable with the current version. Basically you have to manage menuIsOpen if the input inside of the menu is focused, as focus and open state is by default managed through the search input.
Hi everyone, i need to add custom search inside dropdown menu, but can't focus input, here an example:
open menu and try to focus input inside menu
If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.
For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, Email, Password, Date, Month, Week, Time, Local Date and Time, Number - HTML Standard | Form | Implicit submission
In other words:
The form can be submitted from an <input> element if it is the only validatable <input> element in the form or if there is a submit button present.
And react-select uses an <input> element for searching, so your <input> element is not the only existing one in the form, and form submission is prevented according to the spec.
I will close this issue as it being not an issue with the library, but a misunderstanding of standard browser behavior.
When i set my vertical scrollbars always on with menuShouldBlockScroll, there is a padding-right added to the body which shifts entire layout and i get white stripe on the right end of the page.
Not sure how it should act, but if I set my OS settings to auto hide scrollbars it works okay.
Maybe there should be a prop to opt out from this padding adjustment?
How to properly receive props data in react-select's custom component?
Discussed in https://github.com/JedWatson/react-select/discussions/5340
Originally posted by stonix26 September 13, 2022
I created a custom component to customize the control field, for me to place a custom label with animation. And I can't figure out where to place or receive that prop.
I tried placing the custom control component inside my CustomAsyncSelect component, so that I can easily receive my label prop from my CustomAsyncSelect, but it seems there's an issue during render, it loses focus on every keystroke.
@stonix26 Please do not open an issue for a discussion minutes after its creation. If the problem identifies as an issue, it will be elevated accordingly. But at first glance this is merely a question regarding implementation.
I will close this for now. Conversation should be continued in the linked discussion.
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code
I am getting these errors when I add Creatable or even select in my code: Can you plz guide me why am I getting these errors and any possible solution?
I followed this link for implementation: https://www.digitalocean.com/community/tutorials/react-react-select
closeMenuOnSelect not working as expected with <label />
Hi, thanks for creating this library! I'm currently having a problem while creating a dropdown, where i'm trying to check/uncheck the input if someone clicks the list item, i'm using <label /> & <input /> combo and i want to keep the list open when someone is selecting, but even after setting the closeMenuOnSelect prop to false it's not working as expected, the only time it works is when i directly click on the input checkbox
Steps to reproduce:
Go to https://codesandbox.io/s/react-select-input-label-w2cp2t
Open the dropdown and click directly on the checkbox, it will work as expected
Now click on the title of the list item, dropdown will close without even checking the box