fix(input-group): prevent :hover propagation to first button in individual mode (#444)

HTML spec implicitly associates a <label> with its first labelable
descendant, and browsers propagate :hover from the label to that
control. When InputGroup contains multiple sibling labelable controls
(e.g. Pagination.Controls with First/Prev/Next/Last buttons around an
Input), hovering any button caused the first button to also render as
hovered.

Render the root as <div> when focusMode === "individual" (multiple
sibling controls), matching the existing hybrid-mode behavior.
Container mode (single input + addons) still renders as <label> so
click-to-focus affordance is preserved.

Author: pedromenezes1

.changeset/fix-input-group-hover-propagation.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix `InputGroup` hover state incorrectly propagating to the first child button (e.g. in `Pagination.Controls`). Root now renders as `<div>` instead of `<label>` when it contains multiple labelable controls.

packages/kumo/src/components/input-group/input-group.test.tsx

@@ -449,6 +449,53 @@ describe("InputGroup", () => {
       const nestedLabels = container.querySelectorAll("label label");
       expect(nestedLabels.length).toBe(0);
     });
+
+    // Regression: <label> root propagates :hover to first labelable child.
+    it("container is a <div> element (not <label>) in individual focus mode", () => {
+      const { container } = render(
+        <InputGroup>
+          <InputGroup.Button variant="secondary" aria-label="First">
+            First
+          </InputGroup.Button>
+          <InputGroup.Button variant="secondary" aria-label="Prev">
+            Prev
+          </InputGroup.Button>
+          <InputGroup.Input aria-label="Page" />
+          <InputGroup.Button variant="secondary" aria-label="Next">
+            Next
+          </InputGroup.Button>
+          <InputGroup.Button variant="secondary" aria-label="Last">
+            Last
+          </InputGroup.Button>
+        </InputGroup>,
+      );
+      const group = container.querySelector(
+        "[data-slot='input-group']",
+      ) as HTMLElement;
+      expect(group).toBeTruthy();
+      expect(group.tagName).toBe("DIV");
+      expect(group.tagName).not.toBe("LABEL");
+      expect(group.getAttribute("data-focus-mode")).toBe("individual");
+    });
+
+    // Regression guard: hybrid mode must also not render root as <label>.
+    it("container is a <div> element (not <label>) in hybrid focus mode", () => {
+      const { container } = render(
+        <InputGroup>
+          <InputGroup.Addon>@</InputGroup.Addon>
+          <InputGroup.Input aria-label="Email" />
+          <InputGroup.Button variant="secondary" aria-label="Submit">
+            Go
+          </InputGroup.Button>
+        </InputGroup>,
+      );
+      const group = container.querySelector(
+        "[data-slot='input-group']",
+      ) as HTMLElement;
+      expect(group).toBeTruthy();
+      expect(group.tagName).toBe("DIV");
+      expect(group.getAttribute("data-focus-mode")).toBe("hybrid");
+    });
   });
 
   describe("Button", () => {

packages/kumo/src/components/input-group/input-group.tsx

@@ -56,12 +56,11 @@ export const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {
  * suffixes, and action buttons. Accepts Field props and wraps content in
  * Field when label is provided.
  *
- * The container element is **conditional** to avoid nested `<label>` elements:
- * - When `label` is provided, the container renders as a `<div>` because Field
- *   already provides a `<label>` with `htmlFor` that handles click-to-focus.
- * - When `label` is absent (standalone usage), the container renders as a
- *   native `<label>` so clicking anywhere focuses the wrapped input — no
- *   imperative JS needed.
+ * Renders as `<label>` only in standalone container mode (single input, no
+ * sibling buttons) so clicking empty space focuses the input. Otherwise
+ * renders as `<div>` to avoid nested `<label>` (when Field provides one) or
+ * the browser's `:hover` propagation from `<label>` to its first labelable
+ * descendant (when multiple labelable controls are siblings).
  *
  * @note Do not wrap InputGroup inside an external Field without using the `label` prop —
  * this creates invalid nested `<label>` elements. Use InputGroup's own `label` prop instead.
@@ -267,6 +266,8 @@ const Root = forwardRef<
     }
 
     // Container / Individual mode (non-hybrid)
+    // Use <label> only when there's exactly one labelable descendant; otherwise <label> would propagate :hover to its first labelable descendant.
+    const useLabelContainer = !label && focusMode === "container";
     const container = (
       <InputGroupContext.Provider value={contextValue}>
         {/* When label is set, use <div> to avoid nested <label> (Field provides one).
@@ -287,8 +288,8 @@ const Root = forwardRef<
             />
             {children}
           </div>
-        ) : (
-          // Standalone (no label): native <label> wraps everything for click-to-focus
+        ) : useLabelContainer ? (
+          // Standalone container mode: <label> enables click-to-focus on empty space.
           <label
             ref={forwardedRef as React.Ref<HTMLLabelElement>}
             {...dataProps}
@@ -297,6 +298,16 @@ const Root = forwardRef<
           >
             {children}
           </label>
+        ) : (
+          // Individual mode: <div> avoids :hover propagating to the first labelable sibling.
+          <div
+            ref={forwardedRef as React.Ref<HTMLDivElement>}
+            {...dataProps}
+            className={containerClassName}
+            {...rest}
+          >
+            {children}
+          </div>
         )}
       </InputGroupContext.Provider>
     );

packages/kumo/src/components/pagination/pagination.test.tsx

@@ -104,6 +104,22 @@ describe("Pagination", () => {
       fireEvent.click(screen.getByLabelText("Last page"));
       expect(setPage).toHaveBeenCalledWith(10);
     });
+
+    // Regression: <label> wrapper made "First page" appear hovered on sibling hover.
+    it("InputGroup wrapper around controls is a <div>, not a <label>", () => {
+      const { container } = renderPagination({
+        page: 5,
+        perPage: 10,
+        totalCount: 100,
+      });
+      const group = container.querySelector(
+        "[data-slot='input-group']",
+      ) as HTMLElement;
+      expect(group).toBeTruthy();
+      expect(group.tagName).toBe("DIV");
+      expect(group.tagName).not.toBe("LABEL");
+      expect(group.getAttribute("data-focus-mode")).toBe("individual");
+    });
   });
 
   describe("Enter key navigation (input mode)", () => {