diff --git a/client/src/controllers/DropdownController.ts b/client/src/controllers/DropdownController.ts
index e3ffe3b04a..b321c92cd8 100644
--- a/client/src/controllers/DropdownController.ts
+++ b/client/src/controllers/DropdownController.ts
@@ -2,6 +2,7 @@ import { Controller } from '@hotwired/stimulus';
import tippy, { Content, Props, Instance } from 'tippy.js';
import {
hideTooltipOnBreadcrumbExpandAndCollapse,
+ hideTooltipOnClickInside,
hideTooltipOnEsc,
rotateToggleIcon,
} from '../includes/initTooltips';
@@ -10,16 +11,20 @@ import {
* A Tippy.js tooltip with interactive "dropdown" options.
*
* @example
- *
+ *
*/
export class DropdownController extends Controller
{
static targets = ['toggle', 'content'];
+ static values = {
+ hideOnClick: { default: false, type: Boolean },
+ };
declare readonly toggleTarget: HTMLButtonElement;
declare readonly contentTarget: HTMLDivElement;
+ declare readonly hideOnClickValue: boolean;
connect() {
// If the dropdown toggle uses an ARIA label, use this as a hover tooltip.
@@ -36,6 +41,16 @@ export class DropdownController extends Controller {
});
}
+ const plugins = [
+ hideTooltipOnEsc,
+ hideTooltipOnBreadcrumbExpandAndCollapse,
+ rotateToggleIcon,
+ ];
+
+ if (this.hideOnClickValue) {
+ plugins.push(hideTooltipOnClickInside);
+ }
+
/**
* Default Tippy Options
*/
@@ -45,11 +60,7 @@ export class DropdownController extends Controller {
interactive: true,
theme: 'dropdown',
placement: 'bottom',
- plugins: [
- hideTooltipOnEsc,
- hideTooltipOnBreadcrumbExpandAndCollapse,
- rotateToggleIcon,
- ],
+ plugins,
onShow() {
if (hoverTooltipInstance) {
hoverTooltipInstance.disable();
diff --git a/client/src/includes/initTooltips.ts b/client/src/includes/initTooltips.ts
index 6b36bb785c..fd832d2a1f 100644
--- a/client/src/includes/initTooltips.ts
+++ b/client/src/includes/initTooltips.ts
@@ -24,6 +24,26 @@ export const hideTooltipOnEsc = {
},
};
+/**
+ * Hides tooltip when clicking inside.
+ */
+export const hideTooltipOnClickInside = {
+ name: 'hideTooltipOnClickInside',
+ defaultValue: true,
+ fn(instance: Instance) {
+ const onClick = () => instance.hide();
+
+ return {
+ onShow() {
+ instance.popper.addEventListener('click', onClick);
+ },
+ onHide() {
+ instance.popper.removeEventListener('click', onClick);
+ },
+ };
+ },
+};
+
/**
* Prevents the tooltip from staying open when the breadcrumbs expand and push the toggle button in the layout
*/
diff --git a/wagtail/admin/templates/wagtailadmin/shared/dropdown/dropdown.html b/wagtail/admin/templates/wagtailadmin/shared/dropdown/dropdown.html
index ed93370ccd..dc68188694 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/dropdown/dropdown.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/dropdown/dropdown.html
@@ -11,10 +11,11 @@
- `toggle_describedby` (string?) - aria-describedby for the toggle button
- `toggle_classname` (string?) - additional toggle classes
- `toggle_tippy_offset` (string?) - Tippy.js offset prop
+ - `hide_on_click` (boolean?) - Whether or not the tooltip should hide when clicking inside
- `children` - Dropdown contents (`a` and `button` elements only)
{% endcomment %}
-
+