Fix: dropdown overflow

package.json

@@ -65,7 +65,7 @@
     "react-json-view": "^1.19.1",
     "react-multi-select-component": "^4.1.15",
     "react-popper": "^2.2.5",
-    "react-select": "^4.1.0",
+    "react-select": "^5.2.2",
     "react-table": "^7.7.0",
     "react-toast-notifications": "^2.4.0",
     "react-tooltip": "^4.2.10",

src/assets/styles/global.css

@@ -163,54 +163,57 @@
   .radio-outer-ring > span[data-state="checked"] {
     @apply rounded-circle shadow-[#7C3AED] shadow-[0_0_0_2px];
   }
+}
 
-  .multiselect-styling {
-    @apply p-0 -mx-3 mt-1 outline-0 cursor-text;
+@layer components {
+  .react-select-container {
+    @apply p-0 -mx-3 border-0 mb-1 cursor-text h-6;
 
-    .dropdown-container {
-      @apply border-none bg-inherit relative focus-within:shadow-none cursor-text !important;
+    .react-select__control {
+      @apply border-0 bg-inherit shadow-none;
     }
 
-    .dropdown-content {
-      @apply rounded-rounded w-full -mt-3 pt-0 -top-full shadow-input absolute !important;
+    .react-select__control,
+    .react-select__control--is-focused,
+    .react-select__control--menu-is-open {
+      @apply h-6 p-0 m-0 !important;
     }
 
-    .select-item {
-      @apply p-2 my-1 mx-2 rounded bg-grey-0 focus:bg-grey-10 hover:bg-grey-10 flex !important;
+    .react-select__value-container--is-multi,
+    .react-select__value-container--has-value {
+      @apply h-6 pl-3 p-0 m-0 !important;
     }
 
-    .select-panel > div::before {
-      content: url("../../assets/svg-2.0/search.svg");
-      width: 2rem;
-      height: 1.5rem;
-      top: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .react-select__menu,
+    .react-select__menu-list {
+      @apply rounded-t-none mt-0 z-[110] !important;
     }
 
-    .search {
-      @apply py-4 flex items-center px-3 !important;
-    }
-    .search input {
-      @apply h-6 text-grey-90 !important;
+    .react-select__value-container {
+      @apply pl-3 pr-0;
     }
-    .search .search-clear-button {
-      @apply mr-4 !important;
+
+    .react-select__indicators {
+      @apply p-0 h-full items-center flex pr-3;
+
+      .react-select__indicator {
+        @apply p-0;
+      }
     }
 
-    .options {
-      @apply mt-1 !important;
+    .react-select__input {
+      @apply w-full mt-0 min-w-[120px] pt-0 !important;
     }
 
-    .dropdown-heading-dropdown-arrow,
-    .dropdown-search-clear-icon {
-      @apply hidden;
+    .react-select__option,
+    .react-select__option--is-focused,
+    .react-select__option--is-selected {
+      @apply bg-grey-0 hover:bg-grey-5 !important;
     }
 
-    .dropdown-heading {
-      @apply py-0 px-3 outline-0 h-6 cursor-text truncate !important;
+    .react-select__multi-value,
+    .react-select__input-container {
+      @apply my-0 py-0;
     }
   }
 }

src/components/molecules/modal/index.tsx

@@ -2,8 +2,17 @@ import React from "react"
 import CrossIcon from "../../fundamentals/icons/cross-icon"
 import clsx from "clsx"
 import * as Dialog from "@radix-ui/react-dialog"
+import * as Portal from "@radix-ui/react-portal"
 import { useWindowDimensions } from "../../../hooks/use-window-dimensions"
 
+type ModalState = {
+  portalRef: any
+}
+
+export const ModalContext = React.createContext<ModalState>({
+  portalRef: undefined,
+})
+
 export type ModalProps = {
   isLargeModal?: boolean
   handleClose: () => void
@@ -62,13 +71,16 @@ const Modal: ModalType = ({
   isLargeModal = true,
   children,
 }) => {
+  const portalRef = React.useRef(null)
   return (
     <Dialog.Root open={open} onOpenChange={handleClose}>
-      <Dialog.Portal>
-        <Overlay>
-          <Content>{addProp(children, { isLargeModal })}</Content>
-        </Overlay>
-      </Dialog.Portal>
+      <Portal.UnstablePortal ref={portalRef}>
+        <ModalContext.Provider value={{ portalRef }}>
+          <Overlay>
+            <Content>{addProp(children, { isLargeModal })}</Content>
+          </Overlay>
+        </ModalContext.Provider>
+      </Portal.UnstablePortal>
     </Dialog.Root>
   )
 }
@@ -78,7 +90,9 @@ Modal.Body = ({ children, isLargeModal, className, style }) => {
     <div
       style={style}
       className={clsx("inter-base-regular h-full", className)}
-      onClick={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
     >
       {addProp(children, { isLargeModal })}
     </div>
@@ -124,7 +138,9 @@ Modal.Header = ({ handleClose = undefined, children }) => {
 Modal.Footer = ({ children, isLargeModal }) => {
   return (
     <div
-      onClick={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
       className={clsx("px-7 bottom-0 pb-5 flex w-full", {
         "border-t border-grey-20 pt-4": isLargeModal,
       })}