fix click outside

premieroctet · Dec 11, 2024 · e742cb0 · e742cb0
1 parent cba1d26
commit e742cb0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/next-admin/src/components/inputs/Selector.tsx b/packages/next-admin/src/components/inputs/Selector.tsx
@@ -25,7 +25,7 @@ export type SelectorProps = {
 export const Selector = forwardRef<HTMLDivElement, SelectorProps>(
   ({ open, name, onChange, options, selectedOptions }, ref) => {
     const currentQuery = useRef("");
-    const searchInput = createRef<HTMLInputElement>();
+    const searchInput = useRef<HTMLInputElement>(null);
     const { t } = useI18n();
     const {
       allOptions,
@@ -45,7 +45,6 @@ export const Selector = forwardRef<HTMLDivElement, SelectorProps>(
     });
 
     const containerRef = useRef<HTMLDivElement>(null);
-    useImperativeHandle(ref, () => containerRef.current!);
 
     useEffect(() => {
       if (open && searchInput.current) {
@@ -121,7 +120,12 @@ export const Selector = forwardRef<HTMLDivElement, SelectorProps>(
           leave="transition-all ease-linear"
           leaveFrom="opacity-100 translate-y-0"
           leaveTo="opacity-0 -translate-y-1"
-          ref={containerRef}
+          ref={(r) => {
+            containerRef.current = r as HTMLDivElement;
+            if (ref && typeof ref === "object") {
+              ref.current = r as HTMLDivElement;
+            }
+          }}
           onScroll={onScroll}
         >
           <div className="relative flex flex-col">

diff --git a/packages/next-admin/src/hooks/useCloseOnOutsideClick.ts b/packages/next-admin/src/hooks/useCloseOnOutsideClick.ts
@@ -12,7 +12,15 @@ const useClickOutside = <E extends HTMLElement = HTMLElement>(
       }
     };
 
-    document.addEventListener("click", handleClickOutside);
+    setTimeout(() => {
+      /**
+       * There is a weird behavior on Page Router where this triggers
+       * just when a selector is opened. I suppose this is because the click event is not finished
+       * dispatching when we click on a trigger, but this is strange that
+       * this does not occur in App Router
+       */
+      document.addEventListener("click", handleClickOutside);
+    });
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };