MUI Select component attachment point in CSUI?
Just wondering if anyone else has ran into this and what the correct fix should be. Seems like for <Select> components in CSUI when you open the dropdown the corresponding <Popover> doesn't attach to the correct element, and is appended to the document body instead, leading to the dropdown being rendered at the bottom of the page rather than directly underneath the <Select> input. The following queries also return null/empty. What am I missing here?
3 Replies
@tbrockman has reached level 2. GG!
Seems to be the same issue as https://discord.com/channels/946290204443025438/1076545455246286898/1076545455246286898 but not sure how to fix the anchor if document queries aren't returning any elements
Hmm, doesn't seem to matter if I set anchorEl manually or not, and the earlier issues were just related to not querying the Shadow DOM. Don't really know how to fix this.
Ah, okay, figured it out, you need to set the
container
property so that the container doesn't use the default (document.body
), I just used a ref to the select element itself.
So doing something like:
How to do that with DateTimePicker?
const [current, setCurrent] = useState<HTMLElement>(null);
const ref = useRef();
useLayoutEffect(() => {
setCurrent(ref.current)
})
slotProps={{
popper: { container: current },
}}