From c17d130e59ae1bb1a857c138ec26fc5d22f917c9 Mon Sep 17 00:00:00 2001
From: sarah <sarah@plasmic.app>
Date: Wed, 20 Nov 2024 16:23:56 +0500
Subject: [PATCH] fix(rac): update plasmic variant for combobox in classname
 callback

Change-Id: I115ba2f46b84ed9d83854f7e4fbbffabe56937e9
GitOrigin-RevId: 43f11f776b6185b93f8f1b4b0e0f81498166a064
---
 .../react-aria/src/registerComboBox.tsx       | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/plasmicpkgs/react-aria/src/registerComboBox.tsx b/plasmicpkgs/react-aria/src/registerComboBox.tsx
index fd74ba6f43d..86c6dac115a 100644
--- a/plasmicpkgs/react-aria/src/registerComboBox.tsx
+++ b/plasmicpkgs/react-aria/src/registerComboBox.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import {
   ComboBox,
   ComboBoxProps,
+  ComboBoxRenderProps,
   ComboBoxStateContext,
 } from "react-aria-components";
 import { getCommonProps } from "./common";
@@ -70,11 +71,20 @@ export function BaseComboBox(props: BaseComboboxProps) {
     setControlContextData,
     plasmicUpdateVariant,
     className,
-    isDisabled,
     isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode
     ...rest
   } = props;
 
+  const classNameProp = useCallback(
+    ({ isDisabled }: ComboBoxRenderProps) => {
+      plasmicUpdateVariant?.({
+        disabled: isDisabled,
+      });
+      return className ?? "";
+    },
+    [className, plasmicUpdateVariant]
+  );
+
   const idManager = useMemo(() => new ListBoxItemIdManager(), []);
 
   useEffect(() => {
@@ -85,20 +95,8 @@ export function BaseComboBox(props: BaseComboboxProps) {
     });
   }, []);
 
-  // NOTE: Aria <Combobox> does not support render props, neither does it provide an onDisabledChange event, so we have to manually update the disabled state.
-  useEffect(() => {
-    plasmicUpdateVariant?.({
-      disabled: isDisabled,
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
-
   return (
-    <ComboBox
-      isDisabled={isDisabled}
-      // Not calling plasmicUpdateVariant within className callback (which has access to render props) because it would then run on every render
-      className={className}
-      {...rest}
-    >
+    <ComboBox className={classNameProp} {...rest}>
       <PlasmicPopoverTriggerContext.Provider value={true}>
         <PlasmicListBoxContext.Provider
           value={{