fix(clerk-js): Refactor isOpen prop

clerk · Sep 30, 2022 · 044860f · 044860f
1 parent 6ae7f42
commit 044860f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 18 deletions.
diff --git a/packages/clerk-js/src/core/resources/DisplayConfig.ts b/packages/clerk-js/src/core/resources/DisplayConfig.ts
@@ -10,7 +10,6 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
   afterSignOutUrl!: string;
   afterSignUpUrl!: string;
   afterSwitchSessionUrl!: string;
-  isOpen!: boolean;
   applicationName!: string;
   backendHost!: string;
   branded!: boolean;
@@ -48,7 +47,6 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource
     this.afterSignInUrl = data.after_sign_in_url;
     this.afterSignUpUrl = data.after_sign_up_url;
     this.afterSignOutUrl = data.after_sign_out_url;
-    this.isOpen = data.is_open;
     this.afterSignOutOneUrl = data.after_sign_out_one_url;
     this.afterSignOutAllUrl = data.after_sign_out_all_url;
     this.afterSwitchSessionUrl = data.after_switch_session_url;

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

diff --git a/packages/clerk-js/src/ui/hooks/usePopover.ts b/packages/clerk-js/src/ui/hooks/usePopover.ts
@@ -7,32 +7,31 @@ import {
   useFloating,
   UseFloatingProps,
 } from '@floating-ui/react-dom-interactions';
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } 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 { update, reference, floating, strategy, x, y, context } = useFloating({
+  const { 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()],
   });
 
-  useEffect(() => {
-    setIsOpen(props.defaultOpen || false);
-  }, [props.defaultOpen]);
-
-  useEffect(() => {
-    update();
-  }, []); // this is due to a positioning bug on render
+  useLayoutEffect(() => {
+    if (props.isOpenProp) {
+      toggle();
+    }
+  }, []);
 
   useDismiss(context);
 

diff --git a/packages/types/src/displayConfig.ts b/packages/types/src/displayConfig.ts
@@ -10,7 +10,6 @@ export interface DisplayConfigJSON {
   after_sign_out_all_url: string;
   after_sign_out_one_url: string;
   after_sign_out_url: string;
-  is_open: boolean;
   after_sign_up_url: string;
   after_switch_session_url: string;
   application_name: string;
@@ -38,7 +37,6 @@ export interface DisplayConfigResource extends ClerkResource {
   afterSignOutUrl: string;
   afterSignUpUrl: string;
   afterSwitchSessionUrl: string;
-  isOpen?: boolean;
   applicationName: string;
   backendHost: string;
   branded: boolean;