Fix selector

premieroctet · Jul 1, 2024 · 8b50415 · 8b50415
1 parent eaa2a9f
commit 8b50415
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectWidget.tsx b/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectWidget.tsx
@@ -3,7 +3,6 @@ import clsx from "clsx";
 import DoubleArrow from "../../../assets/icons/DoubleArrow";
 import { useForm } from "../../../context/FormContext";
 import { useI18n } from "../../../context/I18nContext";
-import useCloseOnOutsideClick from "../../../hooks/useCloseOnOutsideClick";
 import { Enumeration, Field, ModelName } from "../../../types";
 import Button from "../../radix/Button";
 import { Selector } from "../Selector";
@@ -24,9 +23,6 @@ type Props = {
 const MultiSelectWidget = (props: Props) => {
   const formContext = useForm();
   const { formData, onChange, options, name, schema } = props;
-  const containerRef = useCloseOnOutsideClick<HTMLDivElement>(() =>
-    formContext.setOpen(false, name)
-  );
   const { t } = useI18n();
   const fieldOptions =
     formContext.options?.model?.[formContext.resource!]?.edit?.fields?.[
@@ -67,6 +63,9 @@ const MultiSelectWidget = (props: Props) => {
           formContext.toggleOpen(name);
         }
       }}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
     >
       {!(props.required && selectedValues.length === 0) && (
         <option value={JSON.stringify(selectedValues)} />
@@ -75,7 +74,7 @@ const MultiSelectWidget = (props: Props) => {
   );
 
   return (
-    <div className="relative" ref={containerRef}>
+    <div className="relative">
       {displayMode === "select" && (
         <div
           className={clsx(

diff --git a/packages/next-admin/src/components/inputs/SelectWidget.tsx b/packages/next-admin/src/components/inputs/SelectWidget.tsx
@@ -9,7 +9,6 @@ import { useMemo } from "react";
 import DoubleArrow from "../../assets/icons/DoubleArrow";
 import { useConfig } from "../../context/ConfigContext";
 import { useForm } from "../../context/FormContext";
-import useCloseOnOutsideClick from "../../hooks/useCloseOnOutsideClick";
 import { Enumeration } from "../../types";
 import { slugify } from "../../utils/tools";
 import { Selector } from "./Selector";
@@ -28,9 +27,6 @@ const SelectWidget = ({
   const enumOptions = options.enumOptions?.map(
     (option: any) => option.value as Enumeration
   );
-  const containerRef = useCloseOnOutsideClick<HTMLDivElement>(() => {
-    formContext.setOpen(false, name);
-  });
 
   const { basePath } = useConfig();
 
@@ -44,7 +40,7 @@ const SelectWidget = ({
   }, [value]);
 
   return (
-    <div className="relative" ref={containerRef}>
+    <div className="relative">
       <div
         className={clsx(
           "ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong dark:bg-dark-nextadmin-background-subtle flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1",
@@ -65,6 +61,9 @@ const SelectWidget = ({
               formContext.toggleOpen(name);
             }
           }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
         >
           <option value={value?.value} />
         </select>
@@ -97,7 +96,16 @@ const SelectWidget = ({
             </button>
           )}
           {!disabled && (
-            <div className="flex items-center">
+            <div
+              className="flex items-center"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                if (!disabled) {
+                  formContext.toggleOpen(name);
+                }
+              }}
+            >
               <DoubleArrow />
             </div>
           )}

diff --git a/packages/next-admin/src/components/inputs/Selector.tsx b/packages/next-admin/src/components/inputs/Selector.tsx
@@ -1,7 +1,9 @@
 import { Transition } from "@headlessui/react";
 import debounce from "lodash/debounce";
 import { ChangeEvent, createRef, useEffect, useRef, useState } from "react";
+import { useForm } from "../../context/FormContext";
 import { useI18n } from "../../context/I18nContext";
+import useCloseOnOutsideClick from "../../hooks/useCloseOnOutsideClick";
 import useSearchPaginatedResource from "../../hooks/useSearchPaginatedResource";
 import { Enumeration } from "../../types";
 import LoaderRow from "../LoaderRow";
@@ -21,6 +23,11 @@ export const Selector = ({
   options,
   selectedOptions,
 }: SelectorProps) => {
+  const formContext = useForm();
+  const containerRef = useCloseOnOutsideClick<HTMLDivElement>(() =>
+    formContext.setOpen(false, name)
+  );
+
   const currentQuery = useRef("");
   const searchInput = createRef<HTMLInputElement>();
   const { t } = useI18n();
@@ -76,7 +83,6 @@ export const Selector = ({
     currentQuery.current = e.target.value;
     runSearch(currentQuery.current, true);
   }, 300);
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const onScroll = () => {
     // No need to do an infinite scroll for enums