@noya-app/noya-designsystem 0.1.85 → 0.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/InputField.tsx

@@ -661,6 +661,7 @@ function InputFieldRoot({
         <Popover
           open={true}
           trigger={rootElement}
+          initialFocus={false}
           sideOffset={sideOffset}
           showArrow={false}
         >

package/src/components/Popover.tsx

@@ -31,6 +31,9 @@ interface Props {
   style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
   side?: "top" | "bottom" | "left" | "right";
+  initialFocus?: React.ComponentProps<
+    typeof PopoverPrimitive.Popup
+  >["initialFocus"];
   /**
    * Called when an interaction outside the popover occurs.
    * Return false to prevent the popover from closing.
@@ -58,6 +61,7 @@ export function Popover({
   className,
   portalContainer,
   style,
+  initialFocus,
   shouldCloseOnInteractOutside,
 }: Props) {
   const defaultId = useId();
@@ -126,6 +130,7 @@ export function Popover({
         >
           <PopoverPrimitive.Popup
             ref={popupRef}
+            initialFocus={initialFocus}
             style={style}
             className={cx(
               popoverStyle.base,

package/src/components/__tests__/InputField.test.tsx

@@ -0,0 +1,36 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "bun:test";
+import React, { useEffect, useRef } from "react";
+import { InputField } from "../InputField";
+
+afterEach(cleanup);
+
+describe("InputField", () => {
+  test("keeps focus on the input when its popover mounts", async () => {
+    let input: HTMLInputElement | null = null;
+
+    function InputWithPopover() {
+      const inputRef = useRef<HTMLInputElement>(null);
+
+      useEffect(() => {
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }, []);
+
+      return (
+        <InputField
+          ref={(element) => {
+            inputRef.current = element;
+            input = element;
+          }}
+          width={240}
+          renderPopoverContent={() => <button>Result</button>}
+        />
+      );
+    }
+
+    render(<InputWithPopover />);
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+
+    expect(document.activeElement === input).toBe(true);
+  });
+});