@inglorious/ui 7.1.4 → 7.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.1.4",
+  "version": "7.1.6",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/controls/combobox/template.js

@@ -21,6 +21,74 @@ import {
 
 const NO_FOCUSED_INDEX = -1
 
+/**
+ * Window in which an emulated click is treated as the tail of a pointer
+ * interaction that already handled the gesture.
+ */
+const GHOST_CLICK_MS = 700
+
+/**
+ * Last pointer activation per control element, used to stop the click that
+ * browsers synthesise after a tap from toggling the dropdown a second time.
+ * @type {WeakMap<Element, number>}
+ */
+const pointerActivations = new WeakMap()
+
+/**
+ * Pending outside-pointer listeners, keyed by combobox id. Each entry owns both
+ * the deferred timer and the listener so both can be torn down on unmount.
+ * @type {Map<string|number, { timer: any, listener: (event: Event) => void }>}
+ */
+const outsideClicks = new Map()
+
+/**
+ * Attach (or tear down) the document listener that closes the dropdown when the
+ * user interacts outside of it.
+ *
+ * This listens for `pointerdown` rather than `click` on purpose. Mobile browsers
+ * synthesise `click` asynchronously after `touchend`, and drop it entirely when
+ * the touch drifts into a scroll gesture or the target is replaced meanwhile.
+ * A suppressed click leaves the listener armed, so it then closes the *next*
+ * dropdown on the tap that opened it and the combobox looks stuck. `pointerdown`
+ * is dispatched synchronously for mouse, touch and pen, so there is no race.
+ *
+ * The registration is deferred by a macrotask because the pointerdown that opens
+ * the dropdown is already travelling towards the document. The downside is that
+ * the dropdown can unmount before the timer runs, which would leave a listener
+ * bound to a detached node behind; tearing the pending timer down on unmount
+ * avoids that.
+ * @param {ComboboxProps} props
+ * @param {Element|null|undefined} el dropdown element, or undefined on unmount
+ */
+function trackOutsideClick(props, el) {
+  const key = props.id
+  const previous = outsideClicks.get(key)
+
+  if (previous) {
+    clearTimeout(previous.timer)
+    document.removeEventListener("pointerdown", previous.listener)
+    outsideClicks.delete(key)
+  }
+
+  if (!el) return
+
+  // Resolve the root so the control and the dropdown both count as inside.
+  const root = el.closest(".iw-combobox") ?? el
+  const listener = (event) => {
+    outsideClicks.delete(key)
+    // composedPath is captured at dispatch time, so it still reports the
+    // combobox as an ancestor even when the pressed node was removed from the
+    // DOM while the event was bubbling.
+    if (!event.composedPath().includes(root)) props.onClose?.()
+  }
+
+  const timer = setTimeout(() => {
+    document.addEventListener("pointerdown", listener, { once: true })
+  })
+
+  outsideClicks.set(key, { timer, listener })
+}
+
 export const Combobox = {
   /**
    * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
@@ -72,7 +140,22 @@ export const Combobox = {
           Array.isArray(props.selectedValue) &&
           props.selectedValue.length,
       })}"
-      @click=${() => !props.isDisabled && props.onToggle?.()}
+      @pointerdown=${(event) => {
+        // Touch and pen only: the mouse keeps using click, so a mouse press
+        // never runs the toggle twice.
+        if (props.isDisabled) return
+        if (event.pointerType === "mouse") return
+        pointerActivations.set(event.currentTarget, Date.now())
+        props.onToggle?.()
+      }}
+      @click=${(event) => {
+        if (props.isDisabled) return
+        // Swallow the click a browser synthesises after a tap that the
+        // pointerdown above already handled.
+        const lastActivation = pointerActivations.get(event.currentTarget) ?? 0
+        if (Date.now() - lastActivation < GHOST_CLICK_MS) return
+        props.onToggle?.()
+      }}
     >
       ${when(
         props.isMulti,
@@ -89,6 +172,7 @@ export const Combobox = {
           html`<button
             class="iw-combobox-clear"
             type="button"
+            @pointerdown=${(event) => event.stopPropagation()}
             @click=${(event) => {
               event.stopPropagation()
               props.onClear?.()
@@ -164,6 +248,7 @@ export const Combobox = {
 
     return html`<span
       class="iw-combobox-multi-value-tag"
+      @pointerdown=${(event) => event.stopPropagation()}
       @click=${(event) => event.stopPropagation()}
     >
       ${Chip.render({
@@ -191,21 +276,7 @@ export const Combobox = {
 
     return html`<div
       class="iw-combobox-dropdown"
-      ${ref((el) => {
-        if (el) {
-          setTimeout(() => {
-            document.addEventListener(
-              "click",
-              (event) => {
-                if (!el.contains(event.target)) {
-                  props.onClose?.()
-                }
-              },
-              { once: true },
-            )
-          })
-        }
-      })}
+      ${ref((el) => trackOutsideClick(props, el))}
     >
       ${when(props.isSearchable, () => this.renderSearchInput?.(props))}
       ${when(props.isLoading, () => this.renderLoading?.(props))}
@@ -233,7 +304,9 @@ export const Combobox = {
       @input=${(event) => props.onSearchChange?.(event.target.value)}
       @keydown=${(event) => handleKeyDown(props, event)}
       ${ref((el) => {
-        if (el && props.isOpen) queueMicrotask(() => el.focus())
+        if (el && props.isOpen && shouldFocusSearch()) {
+          queueMicrotask(() => el.focus())
+        }
       })}
     />`
   },
@@ -321,6 +394,25 @@ export const Combobox = {
   },
 }
 
+/**
+ * Whether opening the dropdown should move focus into the search field.
+ *
+ * Focusing it is what lets keyboard users start typing straight away, but on a
+ * touch device it raises the on-screen keyboard, which covers the very option
+ * list the dropdown was opened to read. Coarse pointers therefore open the
+ * dropdown without focusing the search field.
+ * @returns {boolean}
+ */
+function shouldFocusSearch() {
+  if (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function"
+  ) {
+    return true
+  }
+  return window.matchMedia("(hover: hover) and (pointer: fine)").matches
+}
+
 /**
  * Handle key navigation.
  * @param {ComboboxProps} props