fix(clerk-js): Refactor defaultOpen prop

Author: raptisj

packages/clerk-js/src/ui/UserButton/UserButton.tsx

@@ -10,31 +10,30 @@ import { UserButtonPopover } from './UserButtonPopover';
 import { UserButtonTrigger } from './UserButtonTrigger';
 
 const _UserButton = () => {
-  const { isOpen: isOpenProp } = useUserButtonContext();
+  const { defaultOpen } = useUserButtonContext();
   const { floating, reference, styles, toggle, isOpen } = usePopover({
-    defaultOpen: false,
+    defaultOpen,
     placement: 'bottom-end',
     offset: 8,
-    isOpenProp,
   });
 
   return (
     <Flow.Root flow='userButton'>
       <Flex
         elementDescriptor={descriptors.userButtonBox}
-        isOpen={isOpenProp || isOpen}
+        isOpen={isOpen}
         align='center'
         gap={2}
       >
         <UserButtonTopLevelIdentifier />
         <UserButtonTrigger
           ref={reference}
           onClick={toggle}
-          isOpen={isOpenProp || isOpen}
+          isOpen={isOpen}
         />
         <Portal>
           <UserButtonPopover
-            isOpen={isOpenProp || isOpen}
+            isOpen={isOpen}
             close={toggle}
             ref={floating}
             style={{ ...styles }}

packages/clerk-js/src/ui/hooks/usePopover.ts

@@ -7,29 +7,28 @@ import {
   useFloating,
   UseFloatingProps,
 } from '@floating-ui/react-dom-interactions';
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect } from 'react';
 
 type UsePopoverProps = {
   defaultOpen?: boolean;
   placement?: UseFloatingProps['placement'];
   offset?: Parameters<typeof offset>[0];
   autoUpdate?: boolean;
-  isOpenProp?: boolean;
 };
 
 export const usePopover = (props: UsePopoverProps = {}) => {
   const [isOpen, setIsOpen] = React.useState(props.defaultOpen || false);
-  const { reference, floating, strategy, x, y, context } = useFloating({
+  const { update, reference, floating, strategy, x, y, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     whileElementsMounted: props.autoUpdate === false ? undefined : autoUpdate,
     placement: props.placement || 'bottom-start',
     middleware: [offset(props.offset || 6), flip(), shift()],
   });
 
-  useLayoutEffect(() => {
-    if (props.isOpenProp) {
-      toggle();
+  useEffect(() => {
+    if (props.defaultOpen) {
+      update();
     }
   }, []);
 

packages/react/src/components/uiComponents.tsx

@@ -36,7 +36,7 @@ class Portal extends React.PureComponent<MountProps, {}> {
   private portalRef = React.createRef<HTMLDivElement>();
 
   componentDidUpdate(prevProps: Readonly<MountProps>) {
-    if (prevProps.props.appearance !== this.props.props.appearance || prevProps.props !== this.props.props) {
+    if (prevProps.props.appearance !== this.props.props.appearance) {
       this.props.updateProps({ node: this.portalRef.current, props: this.props.props });
     }
   }

packages/types/src/clerk.ts

@@ -446,9 +446,9 @@ export type UserButtonProps = {
    */
   showName?: boolean;
   /**
-    Controls programmatically if the UserButton component is open or not
+    Controls the default state of the UserButton
    */
-  isOpen?: boolean;
+  defaultOpen?: boolean;
   /**
    * Full URL or path to navigate after sign out is complete
    */