Issue with zIndex or maybe portals

[GavanWilhite]

Hi, I'm trying to use this from inside a modal and I can't for the life of me get it not to render like this:

I've tried setting every component I can think of to a high zIndex, but it doesn't seem to work:

<ControlledSelect
  chakraStyles={{
    control: (base) => ({
      ...base,
      zIndex: 10000000
    }),
    container: (base) => ({
      ...base,
      width: "100%",
      zIndex: 10000000
    }),
    menu: (base) => ({
      ...base,
      bgColor: brandBackgroundOverlay,
      zIndex: 10000000
    }),
    menuList: (base) => ({
      ...base,
      bgColor: brandBackground,
      zIndex: 10000000
    }),
    input: (base) => ({
      ...base,
      zIndex: 10000000
    }),
    inputContainer: (base) => ({
      ...base,
      zIndex: 10000000
    }),
    option: (base) => ({
      ...base,
      zIndex: 10000000
    }),
    group: (base) => ({
      ...base,
      zIndex: 10000000
    }),
    valueContainer: (base) => ({
      ...base,
      zIndex: 10000000
    })
  }}
  name={"goal"}
  control={control}
  rules={"disabled"}
  placeholder="A goal to accomplish..."
  {...register("goal", {
    required: !hasContext,
    shouldUnregister: true
  })}
/>

[csandman]

This seems like a stacking context issue. The easiest solution would be to use the menuPortalTarget prop to put the Menu in a portal. That allows it to jump outside of the stacking context. Take a look at the Portaling section of the React Select docs for more info.

Here's a complete example that should work:

const App = () => {
  return (
    <Select
      options={colorOptions}
      // v These are the styles you need v
      menuPortalTarget={document.body}
      styles={{
        menuPortal: (provided) => ({
          ...provided,
          // You can lower this to whatever works
          zIndex: 9999
        })
      }}
      // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    />
  );
};

CodeSandbox: https://codesandbox.io/s/5tqhh0?file=/app.tsx

---

It's important to note that menuPortal is the only style function that uses the original styles prop (not chakraStyles). This was due to a limitation of making a Chakra replacement for the MenuPortal component. If you want more info on that, check out #55

[GavanWilhite]

Hmm, yeah I tried that but it didn’t seem to work. I’ll give it another shot and let you know.

…

On Fri, Apr 28, 2023 at 5:44 PM Chris Sandvik ***@***.***> wrote: This seems like a stacking context <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context> issue. The easiest solution would be to use the menuPortalTarget prop to put the Menu in a portal. That allows it to jump outside of the stacking context. Take a look at the Portaling <https://react-select.com/advanced#portaling> section of the React Select docs for more info. Here's a complete example that should work: const App = () => { return ( <Select options={colorOptions} // v These are the styles you need v menuPortalTarget={document.body} styles={{ menuPortal: (provided) => ({ ...provided, // You can lower this to whatever works zIndex: 9999 }) }} // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ /> );}; CodeSandbox: https://codesandbox.io/s/5tqhh0?file=/app.tsx ------------------------------ It's important to note that menuPortal is the only style function that uses the original styles prop (not chakraStyles). This was due to a limitation of making a Chakra replacement for the MenuPortal component. If you want more info on that, check out #55 <#55> — Reply to this email directly, view it on GitHub <#258 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAP5B73P2CSC7MYXBDMMX43XDRQAJANCNFSM6AAAAAAXP244EQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[GavanWilhite]

I believe it disappeared entirely. On Fri, Apr 28, 2023 at 5:57 PM Gavan Wilhite ***@***.***> wrote:

…

Hmm, yeah I tried that but it didn’t seem to work. I’ll give it another shot and let you know. On Fri, Apr 28, 2023 at 5:44 PM Chris Sandvik ***@***.***> wrote: > This seems like a stacking context > <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context> > issue. The easiest solution would be to use the menuPortalTarget prop to > put the Menu in a portal. That allows it to jump outside of the stacking > context. Take a look at the Portaling > <https://react-select.com/advanced#portaling> section of the React > Select docs for more info. > > Here's a complete example that should work: > > const App = () => { > return ( > <Select > options={colorOptions} > // v These are the styles you need v > menuPortalTarget={document.body} > styles={{ > menuPortal: (provided) => ({ > ...provided, > // You can lower this to whatever works > zIndex: 9999 > }) > }} > // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > /> > );}; > > CodeSandbox: https://codesandbox.io/s/5tqhh0?file=/app.tsx > ------------------------------ > > It's important to note that menuPortal is the only style function that > uses the original styles prop (not chakraStyles). This was due to a > limitation of making a Chakra replacement for the MenuPortal component. > If you want more info on that, check out #55 > <#55> > > — > Reply to this email directly, view it on GitHub > <#258 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAP5B73P2CSC7MYXBDMMX43XDRQAJANCNFSM6AAAAAAXP244EQ> > . > You are receiving this because you authored the thread.Message ID: > <csandman/chakra-react-select/repo-discussions/258/comments/5759360@ > github.com> >