From 9d51c986c17f4b46020b29c01920a0b9eeb5badc Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Thu, 30 Jul 2026 13:33:03 +1000
Subject: [PATCH] Fix comboboxes sometimes only opening on second click

---
 .changeset/old-insects-care.md                   |  5 +++++
 design-system/pkg/src/combobox/Combobox.tsx      | 15 ++-------------
 design-system/pkg/src/combobox/ComboboxMulti.tsx |  5 ++---
 3 files changed, 9 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/old-insects-care.md

diff --git a/.changeset/old-insects-care.md b/.changeset/old-insects-care.md
new file mode 100644
index 000000000..25f425bf5
--- /dev/null
+++ b/.changeset/old-insects-care.md
@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Fix comboboxes sometimes only opening on second click
diff --git a/design-system/pkg/src/combobox/Combobox.tsx b/design-system/pkg/src/combobox/Combobox.tsx
index 9cc31aa1c..000fafb71 100644
--- a/design-system/pkg/src/combobox/Combobox.tsx
+++ b/design-system/pkg/src/combobox/Combobox.tsx
@@ -11,7 +11,6 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -83,7 +82,7 @@ const ComboboxBase = React.forwardRef(function ComboboxBase<T extends object>(
   let buttonRef = useRef<HTMLButtonElement>(null);
   let inputRef = useRef<HTMLInputElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
-  let [popoverRefLikeValue, popoverRef] = useStatefulRef<HTMLDivElement>();
+  let popoverRef = useRef<HTMLDivElement>(null);
   let fieldRef = useObjectRef(forwardedRef);
 
   let { contains } = useFilter({ sensitivity: 'base' });
@@ -106,7 +105,7 @@ const ComboboxBase = React.forwardRef(function ComboboxBase<T extends object>(
       ...props,
       layoutDelegate: layout,
       buttonRef,
-      popoverRef: popoverRefLikeValue,
+      popoverRef,
       listBoxRef,
       inputRef,
       menuTrigger,
@@ -220,16 +219,6 @@ export function usePopoverStyles(props: {
   };
 }
 
-// FIXME: this is a hack to work around a requirement of react-aria. object refs
-// never have the value early enough, so we need to use a stateful ref to force
-// a re-render.
-export function useStatefulRef<T extends HTMLElement>() {
-  let [current, statefulRef] = useState<T | null>(null);
-  return useMemo(() => {
-    return [{ current }, statefulRef] as const;
-  }, [current, statefulRef]);
-}
-
 interface ComboboxInputProps<T> extends ComboboxProps<T> {
   inputProps: InputHTMLAttributes<HTMLInputElement>;
   inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
diff --git a/design-system/pkg/src/combobox/ComboboxMulti.tsx b/design-system/pkg/src/combobox/ComboboxMulti.tsx
index 06063c3a4..c826db792 100644
--- a/design-system/pkg/src/combobox/ComboboxMulti.tsx
+++ b/design-system/pkg/src/combobox/ComboboxMulti.tsx
@@ -12,7 +12,6 @@ import {
   ComboboxEmptyState,
   ComboboxInput,
   usePopoverStyles,
-  useStatefulRef,
 } from './Combobox';
 import { MobileComboboxMulti } from './MobileComboboxMulti';
 import { ComboboxMultiProps } from './types';
@@ -56,7 +55,7 @@ const ComboboxMultiBase = React.forwardRef(function ComboboxMultiBase<
   let buttonRef = useRef<HTMLButtonElement>(null);
   let inputRef = useRef<HTMLInputElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
-  let [popoverRefLikeValue, popoverRef] = useStatefulRef<HTMLDivElement>();
+  let popoverRef = useRef<HTMLDivElement>(null);
   let fieldRef = useObjectRef(forwardedRef);
 
   let layoutDelegate = useListBoxLayout();
@@ -75,7 +74,7 @@ const ComboboxMultiBase = React.forwardRef(function ComboboxMultiBase<
       inputRef,
       layoutDelegate,
       listBoxRef,
-      popoverRef: popoverRefLikeValue,
+      popoverRef,
     },
     state
   );