MUI select popover not rendering correctly

FAQs
1

When using the MUI select component in Embeddable, you might notice the popover may not render correctly. There are 2 options for using the Material UI select component:

  1. Make usage of the native MUI components (in this case the NativeSelect).
  2. Use the normal MUI Select, and try to restyle it.

These are example files:

Wrapper

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/node/AdapterDateFns/index.js';
import React from 'react';

const ThemeWrapper = ({ children }: any) => {
  const ref = React.useRef<HTMLDivElement>(null);
  const [cache, setCache] = React.useState<any>();
  const [theme, setTheme] = React.useState<any>();

  React.useEffect(() => {
    if (ref.current === null) return;

    const shadowContainer = ref.current.getRootNode() as ShadowRoot;
    const shadowRootElement = document.createElement('div');
    shadowContainer.appendChild(shadowRootElement);

    const cache = createCache({
      key: 'css',
      prepend: true,
      container: shadowContainer
    });

    setCache(cache);

    const theme = createTheme({
      components: {
        // If not using the NativeSelect, uncomment this block
        // MuiPopover: {
        //   defaultProps: {
        //     container: shadowRootElement
        //   }
        // },
        // MuiPopper: {
        //   defaultProps: {
        //     container: shadowRootElement
        //   }
        // }
      }
    });

    setTheme(theme);
  }, [ref]);

  if (!cache || !theme) return <div ref={ref}>loading...</div>;

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <CacheProvider value={cache}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          {children}
        </ThemeProvider>
      </CacheProvider>
    </LocalizationProvider>
  );
};

export default ThemeWrapper;


select component

import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  NativeSelect,
  Select,
  SelectChangeEvent
} from '@mui/material';
import React from 'react';

import MUI from './MUI';

type Props = {};

export default (props: Props) => {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <MUI>
      <FormControl fullWidth>
        {/* This commented Select, positions the popover no right bellow the select input */}
        {/* Style it to change the position of it (re-style classes), or make usage of the NativeSelect bellow */}
        {/* <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select> */}
        <InputLabel variant="standard" htmlFor="uncontrolled-native">
          Age
        </InputLabel>
        <NativeSelect
          defaultValue={30}
          inputProps={{
            name: 'age',
            id: 'uncontrolled-native'
          }}
        >
          <option value={10}>Ten</option>
          <option value={20}>Twenty</option>
          <option value={30}>Thirty</option>
        </NativeSelect>
      </FormControl>
    </MUI>
  );
};