From 5080856e0fea4f059ffce3d0717d2af61800a62c Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Tue, 12 Nov 2024 14:45:46 +0800
Subject: [PATCH] popover

---
 .../components/Autocomplete/Autocomplete.tsx  |  2 ++
 packages/actify/src/components/Menus/Menu.tsx |  2 +-
 .../actify/src/components/Popover/Popover.tsx | 25 ++++++++-----------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/actify/src/components/Autocomplete/Autocomplete.tsx b/packages/actify/src/components/Autocomplete/Autocomplete.tsx
index cc47544..a97da43 100644
--- a/packages/actify/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/actify/src/components/Autocomplete/Autocomplete.tsx
@@ -40,6 +40,7 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
         variant={props.variant}
         inputRef={inputRef}
         inputProps={inputProps}
+        onFocus={() => state.setOpen(true)}
         trailingIcon={
           <Icon
             style={{ cursor: 'pointer' }}
@@ -59,6 +60,7 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
 
       {state.isOpen && (
         <Popover
+          offset={16}
           state={state}
           triggerRef={inputRef}
           popoverRef={popoverRef}
diff --git a/packages/actify/src/components/Menus/Menu.tsx b/packages/actify/src/components/Menus/Menu.tsx
index ef42f59..55545a4 100644
--- a/packages/actify/src/components/Menus/Menu.tsx
+++ b/packages/actify/src/components/Menus/Menu.tsx
@@ -40,7 +40,7 @@ export function Menu<T extends object>(props: MenuButtonProps<T>) {
       )}
       {props?.activator?.(ref, menuTriggerProps)}
       {state.isOpen && (
-        <Popover state={state} triggerRef={ref} placement={props.placement}>
+        <Popover state={state} triggerRef={ref}>
           <MenuRoot
             {...props}
             {...menuProps}
diff --git a/packages/actify/src/components/Popover/Popover.tsx b/packages/actify/src/components/Popover/Popover.tsx
index 3615d47..4b84758 100644
--- a/packages/actify/src/components/Popover/Popover.tsx
+++ b/packages/actify/src/components/Popover/Popover.tsx
@@ -17,25 +17,19 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
   popoverRef?: React.RefObject<Element | null>
 }
 
-const Popover = ({
-  state,
-  children,
-  offset = 16,
-  referenceWidth,
-  popoverRef: propRef,
-  ...props
-}: PopoverProps) => {
-  const popoverRef =
-    (propRef as React.RefObject<HTMLDivElement>) || React.useRef(null)
-  const { popoverProps, underlayProps, arrowProps, placement } = usePopover(
+const Popover = ({ children, referenceWidth, ...props }: PopoverProps) => {
+  const _popoverRef = React.useRef(null)
+  const { popoverRef = _popoverRef, state } = props
+
+  const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
-      offset,
       popoverRef
     },
     state
   )
 
+  // make the width of the popover the same as the reference element
   popoverProps.style = {
     ...popoverProps.style,
     '--reference-width': referenceWidth + 'px'
@@ -44,8 +38,11 @@ const Popover = ({
   return (
     <Overlay>
       <div {...underlayProps} className={styles['underlay']} />
-      <div {...popoverProps} ref={popoverRef} className={styles['popover']}>
-        <DismissButton onDismiss={state.close} />
+      <div
+        {...popoverProps}
+        className={styles['popover']}
+        ref={popoverRef as React.RefObject<HTMLDivElement>}
+      >
         {children}
         <DismissButton onDismiss={state.close} />
       </div>