fix(tooltip): non-focusable trigger slot for composition (#62)

Author: karim-semmoud

assets/components/tooltip.ts

@@ -27,7 +27,12 @@ export class Tooltip extends Component<Props, Api> {
     triggerEls.forEach((triggerEl) => {
       const raw = triggerEl.dataset.value;
       const valueProps = raw != null && raw !== "" ? { value: raw } : {};
-      this.spreadProps(triggerEl, this.api.getTriggerProps(valueProps));
+      const tabIndexOverride = triggerEl.getAttribute("tabindex");
+      const triggerProps = this.api.getTriggerProps(valueProps);
+      if (tabIndexOverride === "-1") {
+        triggerProps.tabIndex = -1;
+      }
+      this.spreadProps(triggerEl, triggerProps);
     });
 
     const positionerEl = rootEl.querySelector<HTMLElement>(

assets/test/component/tooltip.test.ts

@@ -11,4 +11,15 @@ describe("Tooltip", () => {
     expect(el.querySelector('[data-part="positioner"]')).toBeTruthy();
     c.destroy();
   });
+
+  it("preserves tabindex -1 on trigger after render", () => {
+    const el = tooltipTree();
+    const trigger = el.querySelector<HTMLElement>('[data-part="trigger"]');
+    expect(trigger).toBeTruthy();
+    trigger!.setAttribute("tabindex", "-1");
+    const c = new Tooltip(el, { id: el.id });
+    c.render();
+    expect(trigger!.getAttribute("tabindex")).toBe("-1");
+    c.destroy();
+  });
 });

e2e/lib/e2e_web/demos/tooltip_demo.ex

@@ -273,6 +273,49 @@ defmodule E2eWeb.Demos.TooltipDemo do
     """
   end
 
+  def patterns_menu_item_items do
+    Corex.Tree.new([
+      %{label: "Edit", value: "edit"},
+      %{label: "Support", value: "support", disabled: true}
+    ])
+  end
+
+  def patterns_menu_item_heex do
+    ~S"""
+    <.menu id="tooltip-pattern-menu" class="menu" items={@items}>
+      <:trigger>Actions</:trigger>
+      <:indicator>
+        <.heroicon name="hero-chevron-down" />
+      </:indicator>
+      <:item :let={item}>
+        <%= if item.value == "support" do %>
+          <.tooltip
+            id="tooltip-pattern-menu-support"
+            class="tooltip tooltip--sm"
+            trigger_tag={:span}
+            show_arrow={false}
+          >
+            <:trigger focusable={false}>{item.label}</:trigger>
+            <:content>Coming soon</:content>
+          </.tooltip>
+        <% else %>
+          {item.label}
+        <% end %>
+      </:item>
+    </.menu>
+    """
+  end
+
+  def patterns_menu_item_elixir do
+    ~S"""
+    items =
+      Corex.Tree.new([
+        %{label: "Edit", value: "edit"},
+        %{label: "Support", value: "support", disabled: true}
+      ])
+    """
+  end
+
   def api_set_open_client_binding_heex do
     ~S"""
     <div class="layout__row">

e2e/lib/e2e_web/live/pages_live/tooltip_patterns_live.ex

@@ -62,7 +62,7 @@ defmodule E2eWeb.TooltipPatternsLive do
         path={@path}
         id="tooltip-patterns-page"
         title="Tooltip · Pattern"
-        subtitle="Multi-trigger with LiveView, per-row tooltips in a ul, and one tooltip with several link triggers."
+        subtitle="Multi-trigger with LiveView, per-row tooltips in a ul, link triggers, and tooltip inside a menu item."
       >
         <.demo_section
           id="tooltip-pattern-multi-trigger-lv"
@@ -181,6 +181,53 @@ defmodule E2eWeb.TooltipPatternsLive do
             </div>
           </:preview>
         </.demo_section>
+
+        <.demo_section
+          id="tooltip-pattern-menu-item"
+          title="Tooltip inside menu item"
+          code_tabs={[
+            %{
+              value: "heex",
+              label: "Heex",
+              language: :heex,
+              code: E2eWeb.Demos.TooltipDemo.patterns_menu_item_heex()
+            },
+            %{
+              value: "elixir",
+              label: ~t"Elixir",
+              language: :elixir,
+              code: E2eWeb.Demos.TooltipDemo.patterns_menu_item_elixir()
+            }
+          ]}
+        >
+          <:preview>
+            <.menu
+              id="tooltip-pattern-menu"
+              class="menu"
+              items={E2eWeb.Demos.TooltipDemo.patterns_menu_item_items()}
+            >
+              <:trigger>Actions</:trigger>
+              <:indicator>
+                <.heroicon name="hero-chevron-down" />
+              </:indicator>
+              <:item :let={item}>
+                <%= if item.value == "support" do %>
+                  <.tooltip
+                    id="tooltip-pattern-menu-support"
+                    class="tooltip tooltip--sm"
+                    trigger_tag={:span}
+                    show_arrow={false}
+                  >
+                    <:trigger focusable={false}>{item.label}</:trigger>
+                    <:content>Coming soon</:content>
+                  </.tooltip>
+                <% else %>
+                  {item.label}
+                <% end %>
+              </:item>
+            </.menu>
+          </:preview>
+        </.demo_section>
       </.demo_page>
     </Layouts.app>
     """

e2e/test/components/tooltip_markup_test.exs

@@ -47,6 +47,11 @@ defmodule E2eWeb.TooltipMarkupTest do
       assert html =~ ~S(id="tooltip-pattern-profile-link-multi-tool")
       assert html =~ ~S(data-on-trigger-value-change="tooltip_pattern_link_multi_value")
       assert html =~ ~S(id="tooltip:tooltip-pattern-profile-link-multi-tool:trigger:1")
+      assert html =~ "tooltip-pattern-menu-item"
+      assert html =~ ~S(id="menu:tooltip-pattern-menu")
+      assert html =~ ~S(id="tooltip-pattern-menu-support")
+      assert html =~ ~S(id="tooltip:tooltip-pattern-menu-support:trigger")
+      assert html =~ ~S|id="tooltip:tooltip-pattern-menu-support:trigger" tabindex="-1"|
     end
 
     test "renders arrow parts when show_arrow", %{conn: conn} do

e2e/test/components/tooltip_test.exs

@@ -5,6 +5,7 @@ defmodule E2eWeb.TooltipTest do
   import Wallaby.Query
 
   alias E2eWeb.ComponentBehaviorSpec
+  alias E2eWeb.MenuModel, as: Menu
   alias E2eWeb.TooltipModel, as: Tooltip
 
   @moduletag :tooltip
@@ -101,5 +102,26 @@ defmodule E2eWeb.TooltipTest do
       |> Tooltip.open_first_tooltip_in_section(section)
       |> Tooltip.wait_open_content_in_section(section, timeout: 8_000)
     end
+
+    feature "menu item  -  open menu does not open tooltip; hover opens tooltip", %{
+      session: session
+    } do
+      section = "tooltip-pattern-menu-item"
+      menu_host = "tooltip-pattern-menu"
+
+      session =
+        session
+        |> ComponentBehaviorSpec.visit_ready(Tooltip, :tooltip, :patterns)
+        |> Tooltip.wait_patterns_page()
+        |> Menu.wait_section_menu_ready(section)
+        |> Tooltip.wait_section_tooltip_ready(section)
+        |> Menu.open_menu_in_section(section)
+        |> Menu.wait_menu_content_open(menu_host, timeout: 8_000)
+        |> Tooltip.refute_open_content_in_section(section)
+
+      session
+      |> Tooltip.hover_first_trigger_in_section(section)
+      |> Tooltip.wait_open_content_in_section(section, timeout: 8_000)
+    end
   end
 end

e2e/test/support/models/tooltip_model.ex

@@ -91,20 +91,13 @@ defmodule E2eWeb.TooltipModel do
   def hover_first_trigger_in_section(session, section_dom_id) do
     if not valid_dom_id?(section_dom_id), do: raise(ArgumentError, "invalid section dom id")
 
-    _ =
-      execute_script(
-        session,
-        """
-        const section = document.querySelector(arguments[0]);
-        if (!section) return;
-        const trigger = section.querySelector('[data-scope="tooltip"][data-part="trigger"]');
-        if (!trigger) return;
-        trigger.scrollIntoView({block: 'center'});
-        trigger.dispatchEvent(new MouseEvent('pointerenter', { bubbles: true }));
-        trigger.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-        """,
-        ["section#" <> section_dom_id]
+    hover(
+      session,
+      css(
+        ~s|section##{section_dom_id} [data-scope="tooltip"][data-part="trigger"]|,
+        visible: :any
       )
+    )
 
     session
   end
@@ -122,6 +115,20 @@ defmodule E2eWeb.TooltipModel do
     session
   end
 
+  def refute_open_content_in_section(session, section_dom_id) do
+    if not valid_dom_id?(section_dom_id), do: raise(ArgumentError, "invalid section dom id")
+
+    refute_has(
+      session,
+      css(
+        ~s|section##{section_dom_id} [data-scope="tooltip"][data-part="content"][data-state="open"]|,
+        visible: :any
+      )
+    )
+
+    session
+  end
+
   def wait_open_content_in_host(session, host_dom_id, opts \\ []) do
     wait_for_has(
       session,

lib/components/tooltip.ex

@@ -106,6 +106,21 @@ defmodule Corex.Tooltip do
   end
   ```
 
+  ### Inside menu (or other roving-focus containers)
+
+  When a tooltip trigger sits inside a menu item, set `focusable={false}` on `<:trigger>` so
+  open focus does not land on the trigger and open the tooltip. Prefer `trigger_tag={:span}`
+  to avoid nested `<button>` elements inside `role="menuitem"`.
+
+  ```heex
+  <.menu_item disabled value="support">
+    <.tooltip class="tooltip tooltip--sm" trigger_tag={:span}>
+      <:trigger focusable={false}>Support</:trigger>
+      <:content>Coming soon</:content>
+    </.tooltip>
+  </.menu_item>
+  ```
+
   <!-- tabs-close -->
 
   ## Style
@@ -271,6 +286,16 @@ defmodule Corex.Tooltip do
       "Trigger element content. Use :let={tooltip} for assigns such as disabled. With more than one <:trigger>, each must set value=\"…\" (unique, stable across LiveView patches)." do
     attr(:class, :string, required: false)
     attr(:value, :string, required: false)
+
+    attr(:focusable, :boolean,
+      doc:
+        "When false, the trigger is not tabbable (tabindex -1). Use inside menus or other roving-focus containers so focus does not open the tooltip. Defaults to true."
+    )
+
+    attr(:tabindex, :integer,
+      doc:
+        "Explicit tabindex for the trigger. Overrides focusable when set. Tooltip disabled still forces -1."
+    )
   end
 
   slot :content,
@@ -317,52 +342,16 @@ defmodule Corex.Tooltip do
         <%= if @trigger_tag == :span do %>
           <span
             class={Map.get(t, :class, nil)}
-            phx-mounted={
-              Connect.ignore_trigger(%Trigger{
-                id: @id,
-                dir: @dir,
-                open: false,
-                disabled: @disabled,
-                orientation: @orientation,
-                tag: @trigger_tag,
-                value: Map.get(t, :value)
-              })
-            }
-            {Connect.trigger(%Trigger{
-              id: @id,
-              dir: @dir,
-              open: false,
-              disabled: @disabled,
-              orientation: @orientation,
-              tag: @trigger_tag,
-              value: Map.get(t, :value)
-            })}
+            phx-mounted={Connect.ignore_trigger(trigger_connect_assigns(@id, @dir, @orientation, @disabled, @trigger_tag, t))}
+            {Connect.trigger(trigger_connect_assigns(@id, @dir, @orientation, @disabled, @trigger_tag, t))}
           >
             {render_slot(t, @slot_assigns)}
           </span>
         <% else %>
           <button
             class={Map.get(t, :class, nil)}
-            phx-mounted={
-              Connect.ignore_trigger(%Trigger{
-                id: @id,
-                dir: @dir,
-                open: false,
-                disabled: @disabled,
-                orientation: @orientation,
-                tag: @trigger_tag,
-                value: Map.get(t, :value)
-              })
-            }
-            {Connect.trigger(%Trigger{
-              id: @id,
-              dir: @dir,
-              open: false,
-              disabled: @disabled,
-              orientation: @orientation,
-              tag: @trigger_tag,
-              value: Map.get(t, :value)
-            })}
+            phx-mounted={Connect.ignore_trigger(trigger_connect_assigns(@id, @dir, @orientation, @disabled, @trigger_tag, t))}
+            {Connect.trigger(trigger_connect_assigns(@id, @dir, @orientation, @disabled, @trigger_tag, t))}
           >
             {render_slot(t, @slot_assigns)}
           </button>
@@ -445,6 +434,20 @@ defmodule Corex.Tooltip do
     })
   end
 
+  defp trigger_connect_assigns(id, dir, orientation, disabled, trigger_tag, trigger_slot) do
+    %Trigger{
+      id: id,
+      dir: dir,
+      open: false,
+      disabled: disabled,
+      orientation: orientation,
+      tag: trigger_tag,
+      value: Map.get(trigger_slot, :value),
+      focusable: Map.get(trigger_slot, :focusable, true),
+      tabindex: Map.get(trigger_slot, :tabindex)
+    }
+  end
+
   defp validate_triggers!(triggers) when is_list(triggers) do
     case triggers do
       [] ->

lib/components/tooltip/anatomy.ex

@@ -46,7 +46,17 @@ defmodule Corex.Tooltip.Anatomy do
 
   defmodule Trigger do
     @moduledoc false
-    defstruct [:id, :dir, :open, :disabled, orientation: "horizontal", tag: :button, value: nil]
+    defstruct [
+      :id,
+      :dir,
+      :open,
+      :disabled,
+      :tabindex,
+      orientation: "horizontal",
+      tag: :button,
+      value: nil,
+      focusable: true
+    ]
 
     @ignored_attrs [
       "type",

lib/components/tooltip/connect.ex

@@ -49,7 +49,7 @@ defmodule Corex.Tooltip.Connect do
     base = %{
       "data-scope" => "tooltip",
       "data-part" => "trigger",
-      "tabindex" => if(assigns.disabled, do: -1, else: 0),
+      "tabindex" => trigger_tabindex(assigns),
       "data-disabled" => assigns.disabled,
       "dir" => Map.get(assigns, :dir),
       "data-orientation" => Map.get(assigns, :orientation, "vertical"),
@@ -144,4 +144,13 @@ defmodule Corex.Tooltip.Connect do
       to: Selectors.css_id("tooltip:#{assigns.id}:arrow-tip")
     )
   end
+
+  defp trigger_tabindex(assigns) do
+    cond do
+      assigns.disabled -> -1
+      is_integer(Map.get(assigns, :tabindex)) -> Map.get(assigns, :tabindex)
+      Map.get(assigns, :focusable, true) == false -> -1
+      true -> 0
+    end
+  end
 end