@lumx/react 4.16.0-alpha.2 → 4.16.0-alpha.4

package/index.js

@@ -7287,9 +7287,10 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
 
   // If `as` is provided, use it directly; otherwise use the LumX Button (full theme/disabled behavior).
   const ButtonComp = as ?? Button;
-  const internalRef = useRef(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mergedRef = useMergeRefs(ref, internalRef, anchorRef);
+
+  // Track the button DOM element via state (instead of useRef) so it re-triggers the useEffect
+  const [buttonElement, setButtonElement] = useState(null);
+  const mergedRef = useMergeRefs(ref, setButtonElement, anchorRef);
 
   // Keep onSelect in a ref to avoid re-creating the handle on every render
   const onSelectRef = useRef(onSelect);
@@ -7297,9 +7298,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
 
   // Create the combobox handle with button-mode controller on mount
   useEffect(() => {
-    const button = internalRef.current;
-    if (!button) return undefined;
-    const handle = setupComboboxButton(button, {
+    if (!buttonElement) return undefined;
+    const handle = setupComboboxButton(buttonElement, {
       onSelect(option) {
         onSelectRef.current?.(option);
       }
@@ -7309,7 +7309,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
       handle.destroy();
       setHandle(null);
     };
-  }, [setHandle]);
+  }, [buttonElement, setHandle]);
   return ComboboxButton$1({
     ...buttonProps,
     label,