[BUG] dropdown is not shown above other content

[fredericbahr]

Description

When I view the select within a form,
I expect the dropdown to be above all components and be fully visible,
But currently the dropdown is not above all other content

chakra-react-select Version

4.1.0

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Open Select configured as follow

        <FormControl isRequired>
          <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.5 }}
          >
            <FormLabel>Grund der Kontaktaufnahme</FormLabel>
            <Select
              placeholder="Wähle eine Option"
              options={reasonForContactOptions}
              onChange={handleReasonForContactChange}
              value={reasonForContactOptions.find((contactReason) => contactReason.value === reasonForContact)}
            />
          </motion.div>
        </FormControl>

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Package Manager

NPM

Additional Information

No response

[csandman]

Can you provide me with a minimal reproduction? You can use this template for it: https://stackblitz.com/edit/vitejs-vite-evghcw?file=src%2Fapp.tsx

This seems like it might be an issue with the motion.div tbh. Those might mess with the z-index of their children, which would make these overlap weirdly. If you look at the main example, you can see that this doesn't generally happen: https://stackblitz.com/edit/vitejs-vite-lzaqwr?file=src%2Fapp.tsx

If it is a z-index issue, you could potentially fix it by using the approach from this issue: #55

[csandman]

Actually, I gave it a shot on the exact version you're on, using the setup you provided and I'm not seeing the issue. I can't help otherwise without a reproduction, but this doesn't appear to be a bug. https://stackblitz.com/edit/vitejs-vite-674tkm?file=src%2Fapp.tsx

[fredericbahr]

Hey @csandman,
using the menuPortalTarget={document.body} property fixed my problem.
Thanks for your fast help.

You can close this ticket.