React Select

Most functionalities of react-select should work out of the box with our components. There are some edge cases that need to be handled for example when rendering menus inside our Dialog component.

#

Dialog

#

Rendering menus inside dialogs

When using react-select inside a Dialog we need to use portals to ensure the menu pops out and is fully visible.

1. Set the menuPortalTarget prop to document.body to render the menu inside a portal.

   <Select menuPortalTarget={document.body} />

2. Next we need to ensure focus trapping is handled correctly inside the portal. Wrap the MenuPortal children in our ModalLayer component.

   import { ModalLayer } from "@optiaxiom/react";
   import Select, { components } from "react-select";
    
   const MenuPortal = ({ children, ...props }) => {
     return (
       <components.MenuPortal {...props}>
         {props.appendTo ? <ModalLayer>{children}</ModalLayer> : children}
       </components.MenuPortal>
     );
   };
    
   <Select components={{ MenuPortal }} />;

3. Finally set the zIndex of the MenuPortal to our popover token to ensure the menu is visible on top of our dialog.

   import { theme } from "@optiaxiom/react";
    
   <Select
     styles={{
       menuPortal: (styles) => ({
         ...styles,
         zIndex: theme.zIndex.popover,
       }),
     }}
   />;