I have a dropdown with an element b-form-datepicker
. The problem is that when the user clicks on it, datepicker
the dropdown closes, and I don't know how to avoid it. For the inputs what I used was this: @click.capture.native.stop
but it doesn't work for the datepicker
. The code would be this
<b-dropdown>
<b-form-datepicker></b-form-datepicker>
</b-dropdown>
At the same time I was reading the documentation of b-dropdown-form
but it still does not stay open when clicking on the datepicker
.
Research, analysis and tests
After some other interesting search
On github "bootstrap-vue/bootstrap-vue" they explained: Dropdown - prevent closing after click on dropdown-item #1628
Additionally tips / best practices with dropdown"
This is the closest thing I've found SIMULATES dropdown persistence by "playing" with the dropdown content and displaying it again (updating the content)
Added search difficulty due to the existence of "dropdown datepickers and non-dropdown datepickers" :P Like this case of datepicker with dropdowns or the "datepicker-dropdown" npm package that has nothing to do with the question .
At this point it occurred to me to activate the dropdown from an external button that you place just above the dropdown like this. Show hide dropdown options from another button so that you could better control showing and hiding the dropdown, but of course we are almost talking about a custom dropdown and it gets out of the question.
As you can see, there are many separate things, but just exactly what you require is almost impossible, it would be a hack as I am going to show you below, the problem is that I see it as very inconsistent so I would not recommend it at all.
"little hack accomplished"
As a comment regarding the hack, there are 3 exact points of the "native" datepicker where clicking closes the dropdown, two of them (one the icon and the other the selected date input) that can be controlled with preventDefault and StopProgapagate. The third point where the dropdown is closed is a small padding that the icon has, which also does not allow to control the dropdown event "neither preventDefault nor stopPropagate" so... the space between the icon and the input, I have crushed it with CSS to almost decrease to 0 the probability of clicking on that area that closes the dropdown.
Specifically, the area that I have crushed with CSS, is the "natural datepicker activation" area, but when using it as "preventDefault or stopPropagate" does not work, it does not allow to control the closing of the dropdown and I have decided to eliminate that area and that it does not be clickable.
To replace the datepicker that should open but that prevents us from using the dropdown correctly and we have hammered with css, I have created or simulated the window that opens that datepicker manually and I pass the data to the original datepicker.
In this way we control the (show / hide) of each part separately, both the dropdown itself and the calendar for the datepicker.
As you can see it is quite ugly and inconsistent, some parts of the datepicker can be controlled with events using "stopPrograpagion" but "preventDefault" does not work and vice versa.
FINAL CONCLUSION
From experience, when something that "seems common" does not exist and is so difficult to address, it is usually because it is either not profitable or other people have already stuck with it and directly decided to change the approach to the problem.
I think that at the point of assessing and taking into account the (cost of time / benefit) it is better to ask yourself: Is this really my problem? I mean, is my problem really not being able to put a datepicker in a dropdown?
Analyzing each part of the problem, what does the dropdown give us? In the end, it's a simple JS effect that shows or hides a series of inline elements, ie 1 button, 1 div with a loop and a toggle effect with a couple of styles.
It would only force me to use the native component as you request if it offered me many other things that save me time, a rich dropdown type such as select2 and let's say then yes, I would need that dropdown.
For example, there are "dropdowns" with built-in browsers like the selector library called "select2" which offers browsers, chips and some additional behaviors built into the dropdown itself. If it were the case, the need to use that specific dropdown could be understood, in another case...
Solution Recommendation
Would you "create a custom dropdown"? Perhaps one that extends from the core and "overrides triggered listener events"? So control the dropdown at will.
I would say yes. If the dropdown gives me headaches and it is just an effect of displaying and showing elements, I would consider making a custom one.
Finally, and in relation to the fact that you mention having used it before, I leave you this link of @click.native.prevent or @click.stop.prevent , in case it gives you any additional idea
"Sometimes, less is more" :)
(UPDATE)
Just today (2-January-2021) I have seen a new publication by the community
Angular Developers - JavaScript Mastermind for Professional Development by AngularJobs.com
with a repository that they have published and I have remembered this question, I have found it interesting, perhaps it will help you to complete, improve and/or enrich that Dropdown; )GitHub weblineindia/AngularJS-Dropdown