fix(ui): close menu when click outside

anse-app · May 9, 2023 · 5691818 · 5691818
1 parent 42c373a
commit 5691818
Showing 1 changed file with 15 additions and 19 deletions.
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
-import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
+import { children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
 import type { JSX, JSXElement } from 'solid-js'
 
@@ -43,27 +43,23 @@ export const DropDownMenu = (props: Props) => {
     return child
   }
 
-  createEffect(() => {
-    // https://github.com/chakra-ui/zag/issues/595
-    api().setPositioning({})
-  })
-
   return (
-    <div id="DropDownMenuRef" class="!outline-none" >
+    <div>
       <Dynamic component={resolvedChild} />
-      <Show when={api().isOpen}>
-        <Portal>
-          <div {...api().positionerProps} z-20>
-            <div {...api().contentProps} class="bg-white dark-bg-zinc-900 flex flex-col space-y-1 rounded-md shadow-md ">
-              <Show when={api().isOpen}>
-                <For each={props.menuList}>
-                  {item => (<div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>{item.icon && <div class={item.icon} />}<div>{item.label}</div></div>)}
-                </For>
-              </Show>
-            </div>
+      <Portal>
+        <div {...api().positionerProps}>
+          <div {...api().contentProps} class="bg-base rounded-md shadow-md">
+            <For each={props.menuList}>
+              {item => (
+                <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
+                  {item.icon && <div class={item.icon} />}
+                  <div>{item.label}</div>
+                </div>
+              )}
+            </For>
           </div>
-        </Portal>
-      </Show>
+        </div>
+      </Portal>
     </div>
   )
 }