Update Radix UI components and improve select behavior

- Added overrides for Radix UI components in package.json and pnpm-lock.yaml to ensure consistent versions.
- Updated the Select and Popover components to handle pointer events more effectively, improving user interaction.
- Enhanced FormSelectField to manage default values correctly.
- Adjusted version specifications for several Radix UI components in the components package.

Author: PanJ

.changeset/fix-select-react19.md

@@ -0,0 +1,5 @@
+---
+"@pplethai/components": patch
+---
+
+Fix Select and popover dropdowns closing immediately on React 19 and in mobile WebViews by upgrading Radix Select, aligning shared Radix layers, ignoring spurious empty value sync in forms, and using controlled values in FormSelectField.

package.json

@@ -23,5 +23,12 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2"
   },
-  "packageManager": "pnpm@9.15.1"
+  "packageManager": "pnpm@9.15.1",
+  "pnpm": {
+    "overrides": {
+      "@radix-ui/react-dismissable-layer": "1.1.11",
+      "@radix-ui/react-focus-scope": "1.1.7",
+      "@radix-ui/react-portal": "1.1.9"
+    }
+  }
 }

packages/components/package.json

@@ -58,14 +58,14 @@
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",

packages/components/src/components/ui/popover.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { composePointerDownOutsideOnCombobox } from "../../lib/radix-outside-pointer";
 import { cn } from "../../lib/utils";
 
 export const Popover = PopoverPrimitive.Root;
@@ -9,12 +10,13 @@ export const PopoverAnchor = PopoverPrimitive.Anchor;
 export const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, onPointerDownOutside, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
+      onPointerDownOutside={composePointerDownOutsideOnCombobox(onPointerDownOutside)}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,

packages/components/src/components/ui/select.tsx

@@ -2,9 +2,37 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { dropdownFieldStyles } from "../../lib/dropdown-field-styles";
+import {
+  composePointerDownOutsideOnCombobox,
+  shouldIgnoreSpuriousSelectValueChange,
+} from "../../lib/radix-outside-pointer";
 import { cn } from "../../lib/utils";
 
-export const Select = SelectPrimitive.Root;
+export const Select = ({
+  onValueChange,
+  value,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => {
+  const handleValueChange = React.useCallback(
+    (nextValue: string) => {
+      if (shouldIgnoreSpuriousSelectValueChange(nextValue, value)) {
+        return;
+      }
+      onValueChange?.(nextValue);
+    },
+    [onValueChange, value],
+  );
+
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      onValueChange={onValueChange ? handleValueChange : undefined}
+      {...props}
+    />
+  );
+};
+Select.displayName = SelectPrimitive.Root.displayName;
+
 export const SelectGroup = SelectPrimitive.Group;
 export const SelectValue = SelectPrimitive.Value;
 
@@ -59,7 +87,7 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
 export const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = "popper", onPointerDownOutside, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -70,6 +98,7 @@ export const SelectContent = React.forwardRef<
         className,
       )}
       position={position}
+      onPointerDownOutside={composePointerDownOutsideOnCombobox(onPointerDownOutside)}
       {...props}
     >
       <SelectScrollUpButton />

packages/components/src/form/fields.tsx

@@ -73,7 +73,10 @@ export function FormSelectField<T extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           <FormLabel>{label}</FormLabel>
-          <Select onValueChange={field.onChange} defaultValue={field.value}>
+          <Select
+            value={field.value === undefined || field.value === null ? "" : String(field.value)}
+            onValueChange={field.onChange}
+          >
             <FormControl>
               <SelectTrigger>
                 <SelectValue placeholder={placeholder} />

packages/components/src/lib/radix-outside-pointer.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  composePointerDownOutsideOnCombobox,
+  isComboboxTriggerTarget,
+  shouldIgnoreSpuriousSelectValueChange,
+} from "./radix-outside-pointer";
+
+describe("shouldIgnoreSpuriousSelectValueChange", () => {
+  it("ignores empty string when a controlled value is set", () => {
+    expect(shouldIgnoreSpuriousSelectValueChange("", "bkk")).toBe(true);
+  });
+
+  it("allows empty string when value is already empty", () => {
+    expect(shouldIgnoreSpuriousSelectValueChange("", "")).toBe(false);
+  });
+
+  it("allows empty string when uncontrolled", () => {
+    expect(shouldIgnoreSpuriousSelectValueChange("", undefined)).toBe(false);
+  });
+
+  it("allows non-empty updates", () => {
+    expect(shouldIgnoreSpuriousSelectValueChange("cnx", "bkk")).toBe(false);
+  });
+});
+
+describe("composePointerDownOutsideOnCombobox", () => {
+  it("prevents default when target is inside a combobox trigger", () => {
+    const trigger = document.createElement("button");
+    trigger.setAttribute("role", "combobox");
+    const inner = document.createElement("span");
+    trigger.appendChild(inner);
+
+    const handler = composePointerDownOutsideOnCombobox();
+    const event = new CustomEvent("pointerdownOutside", {
+      detail: { originalEvent: {} as PointerEvent },
+    });
+    Object.defineProperty(event, "target", { value: inner });
+    const preventDefault = vi.spyOn(event, "preventDefault");
+
+    handler(event);
+
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
+  it("forwards to user handler", () => {
+    const userHandler = vi.fn();
+    const handler = composePointerDownOutsideOnCombobox(userHandler);
+    const event = new CustomEvent("pointerdownOutside", {
+      detail: { originalEvent: {} as PointerEvent },
+    });
+    Object.defineProperty(event, "target", { value: document.body });
+
+    handler(event);
+
+    expect(userHandler).toHaveBeenCalledWith(event);
+  });
+});
+
+describe("isComboboxTriggerTarget", () => {
+  it("returns false for non-element targets", () => {
+    expect(isComboboxTriggerTarget(null)).toBe(false);
+  });
+});

packages/components/src/lib/radix-outside-pointer.ts

@@ -0,0 +1,33 @@
+type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
+
+/** True when the event target is a select/combobox trigger (not the portaled content). */
+export function isComboboxTriggerTarget(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest('[role="combobox"]') !== null;
+}
+
+/**
+ * Radix Select opens on pointerdown; the same gesture can be treated as an outside
+ * pointerdown on the newly mounted content (React 19 / mobile WebViews). Ignore those.
+ */
+export function composePointerDownOutsideOnCombobox(
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,
+): (event: PointerDownOutsideEvent) => void {
+  return (event) => {
+    if (isComboboxTriggerTarget(event.target)) {
+      event.preventDefault();
+    }
+    onPointerDownOutside?.(event);
+  };
+}
+
+/**
+ * Radix can call onValueChange('') when the hidden native select syncs before options mount
+ * (common with React 19 + forms). Skip empty updates when a real controlled value exists.
+ * @see https://github.com/radix-ui/primitives/issues/3693
+ */
+export function shouldIgnoreSpuriousSelectValueChange(
+  nextValue: string,
+  controlledValue: string | undefined,
+): boolean {
+  return nextValue === "" && controlledValue !== undefined && controlledValue !== "";
+}

packages/components/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/components/icon.tsx","./src/components/logo.tsx","./src/components/nav-link-class-name.ts","./src/components/navbar.tsx","./src/components/layout/container.tsx","./src/components/layout/index.ts","./src/components/layout/inline.tsx","./src/components/layout/stack.tsx","./src/components/ui/accordion.tsx","./src/components/ui/alert.tsx","./src/components/ui/autocomplete.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/multi-select.tsx","./src/components/ui/navigation-menu.tsx","./src/components/ui/popover.tsx","./src/components/ui/progress.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/slider.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/stepper.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.ts","./src/form/fields.tsx","./src/form/index.ts","./src/lib/dropdown-field-styles.ts","./src/lib/gradients.ts","./src/lib/utils.ts","./src/lib/variants.ts","./src/test/setup.ts"],"version":"5.9.3"}
+{"root":["./src/index.ts","./src/components/icon.tsx","./src/components/logo.tsx","./src/components/nav-link-class-name.ts","./src/components/navbar.tsx","./src/components/layout/container.tsx","./src/components/layout/index.ts","./src/components/layout/inline.tsx","./src/components/layout/stack.tsx","./src/components/ui/accordion.tsx","./src/components/ui/alert.tsx","./src/components/ui/autocomplete.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/multi-select.tsx","./src/components/ui/navigation-menu.tsx","./src/components/ui/popover.tsx","./src/components/ui/progress.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/slider.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/stepper.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.ts","./src/form/fields.tsx","./src/form/index.ts","./src/lib/dropdown-field-styles.ts","./src/lib/gradients.ts","./src/lib/radix-outside-pointer.ts","./src/lib/utils.ts","./src/lib/variants.ts","./src/test/setup.ts"],"version":"5.9.3"}