I have two multi value react-select drodowns as part of a bigger filter component. The issue I am encountering is when you open one of the dropdowns, select one or more values and click outside of it, then the dropdown does not close.
If you click outside of the dropdown without selecting any value then it closes as expected. If you select a value and close the dropdown by clicking in the control and open it again, then it closes on outside click.
Code to reproduce the issue is here: https://codesandbox.io/s/nervous-wildflower-evmi0z
Does anyone have any idea why this is happening?
Because you use a library, and they didn't build you that feature to close the dropdown when you click outside.
In this case, you should customize the Dropdown component using css.
Read this question here may it help you:
react-select wont close when clicking outside
Related
I use mat-dialog in a a project and there is a form field (dropdown) called course in this dialog. I want to open another dialog in order to add a course record that is not available in the course list dropdown. At this step, I am wondering what is a proper way for this scenario.
Should I open the second dialog inside the first dialog by setting the form fields of the second one?
Or is it better just hiding first dialog and showing second and then after completing the operation on the second, close second ad show first one?
If there is a demo of a proper approach for opening dialog on another I would be appreciated.
It depends on your preference, requirement and the library you have chosen. Since you have already mentioned that you are using material dialog, it works fine with nested unlike bootstrap-modal. So, If I were you, I would go with nested modal by properly configuring z index and backdrop.
You can check this demo just to get idea,
I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?
#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.
there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you
I'm trying to make a simple multiple select using Material-UI's Select component. But one thing that I did not like is that if you unselect anything or just don't select anything and click outside, the dropdown disappears but the label remains focused until you click again or focus on other component.
Any solution?
I want to remove focus from the label/select component when the menu disappears.
Link to component: https://material-ui.com/demos/selects/
Although this is not exactly what You are looking for there is important reason why those fields are kept focused (despite of being too much visibly outlined) and it is a11y.
Thanks to keeping focus on <select> element we are allowed to reselect once selected value eg. by only keyboard (this covers case when you selected bad option unintentionally and want to easily come to the select list back or - like in Yours - easily select again if under any situation we wanted it but we closed the list before it happend).
One important thing is that the MD's <select>'s focus behaviour does not differ from the way native select does it:
And generally should not be changed outlinenone.com without having critical reason.
I'm using a fork of React-Select for a project adding customized functionality. I'm trying to disable the dropdown from opening when a user clicks on one of the tags (When multi is set to true). So if a user clicks on one of the tags the dropdown menu won't open. I went over Value.js file to see if I could find the isOpen state triggered by clicking on the tags but couldn't find it.
Here's a screenshot illustrating what I mean.
In case if used custom tag component (valueComponent)
try to use:
onMouseDown = (e) => e.stopPropagation();
(instead of onClick) on that component.
I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working