Add ability to prevent the dropdown from closing when a dropdown-item is clicked
This issue is in reference to this comment in this MR: gitlab!22823 (comment 270059970)
Currently, when a <gl-dropdown-item>
is clicked, it will close the <gl-dropdown>
with no way to change this behavior. This is because <gl-dropdown-item>
uses <b-dropdown-item>
internally, which is hard-coded to close the dropdown on click:
https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/dropdown/dropdown-item.js#L36
In the aforementioned MR, we have a dropdown that needs to use <gl-dropdown-item>
, but the dropdown needs to stay open until a button is clicked so that we can get "select and confirm" behavior:
Vulnerability state dropdown |
---|
Because <gl-dropdown-item>
currently does not have a way to stop the dropdown from closing, in the aforementioned MR we've had to duplicate the <gl-dropdown-item>
using a <li>
and the appropriate classes, but it would be great if this behavior was supported natively.
Note that <gl-dropdown>
uses <b-dropdown>
natively. Although it emits a hide
event that can be used to stop the dropdown from closing:
https://bootstrap-vue.js.org/docs/components/dropdown/#comp-ref-b-dropdown-events
This is a custom event that does not have a path
, and the target
is always the dropdown itself:
Custom BvEvent |
---|
This means that we can't differentiate between the dropdown closing because an item was clicked, the dropdown button was clicked, or it's a click outside of the dropdown altogether.