🧩 Plasmo Developers•2y ago

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?

console.log(document.getElementById('plasmo-shadow-container')) # null
console.log(document.getElementsByClassName('plasmo-csui-container')) # []

console.log(document.getElementById('plasmo-shadow-container')) # null
console.log(document.getElementsByClassName('plasmo-csui-container')) # []

4 Replies

Arcane•2y ago

@tbrockman has reached level 2. GG!

tbrockmanOP•2y ago

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:

const [current, setCurrent] = useState<HTMLElement>(null);
const ref = useRef<HTMLElement>();

useLayoutEffect(() => {
  setCurrent(ref.current)
})

return (
  <Select ... ref={ref}
    MenuProps={{
      container: current
    }}>
    <MenuItem> ... </MenuItem>
  </Select>
)

const [current, setCurrent] = useState<HTMLElement>(null);
const ref = useRef<HTMLElement>();

useLayoutEffect(() => {
  setCurrent(ref.current)
})

return (
  <Select ... ref={ref}
    MenuProps={{
      container: current
    }}>
    <MenuItem> ... </MenuItem>
  </Select>
)

viktassen•10mo ago

How to do that with DateTimePicker? const [current, setCurrent] = useState<HTMLElement>(null); const ref = useRef(); useLayoutEffect(() => { setCurrent(ref.current) }) slotProps={{ popper: { container: current }, }}

Ayondip•3mo ago

@tbrockman it's still not working const [current, setCurrent] = useState<HTMLElement>(null); const ref = useRef() useLayoutEffect(() => { setCurrent(ref.current) })
<Select label="Age" ref={ref} MenuProps={{ anchorEl: current, container: current }} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> this is my code

Gaming

Programming

MUI Select component attachment point in CSUI?