Add a way to hide the tooltip on click for chooser widgets

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
- * <div data-controller="w-dropdown">
+ * <div data-controller="w-dropdown" data-w-dropdown-hide-on-click-value-"true">
  *  <button type="button" data-w-dropdown-target="toggle" aria-label="Actions"></button>
  *  <div data-w-dropdown-target="content">[…]</div>
  * </div>
  */
 export class DropdownController extends Controller<HTMLElement> {
   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<HTMLElement> {
       });
     }
 
+    const plugins = [
+      hideTooltipOnEsc,
+      hideTooltipOnBreadcrumbExpandAndCollapse,
+      rotateToggleIcon,
+    ];
+
+    if (this.hideOnClickValue) {
+      plugins.push(hideTooltipOnClickInside);
+    }
+
     /**
      * Default Tippy Options
      */
@@ -45,11 +60,7 @@ export class DropdownController extends Controller<HTMLElement> {
       interactive: true,
       theme: 'dropdown',
       placement: 'bottom',
-      plugins: [
-        hideTooltipOnEsc,
-        hideTooltipOnBreadcrumbExpandAndCollapse,
-        rotateToggleIcon,
-      ],
+      plugins,
       onShow() {
         if (hoverTooltipInstance) {
           hoverTooltipInstance.disable();

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
  */

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 %}
 
-<div data-controller="w-dropdown" class="{% classnames 'w-dropdown' classname %}" {{ attrs }}>
+<div data-controller="w-dropdown" class="{% classnames 'w-dropdown' classname %}" {{ attrs }} {% if hide_on_click %}data-w-dropdown-hide-on-click-value="true"{% endif %}>
     <button type="button" class="{% classnames 'w-dropdown__toggle' toggle_label|yesno:',w-dropdown__toggle--icon' toggle_classname %}" data-w-dropdown-target="toggle"{% if toggle_aria_label %} aria-label="{{ toggle_aria_label }}"{% endif %}{% if toggle_describedby %} aria-describedby="{{ toggle_describedby }}"{% endif %}{% if toggle_tippy_offset %} data-tippy-offset="{{ toggle_tippy_offset }}"{% endif %}>
         {{ toggle_label }}
         {% if toggle_icon %}

wagtail/admin/templates/wagtailadmin/widgets/chooser.html

@@ -18,7 +18,7 @@
         {% endblock %}
 
         {% trans "Actions" as toggle_label %}
-        {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=toggle_label toggle_describedby=title_id %}
+        {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=toggle_label toggle_describedby=title_id hide_on_click=True %}
             <button type="button" data-chooser-action-choose aria-describedby="{{ title_id }}">
                 {% icon name="resubmit" %}
                 {{ widget.choose_another_text }}