Rendering the library inside a shadow DOM?

omerfaran commented 1 year ago

Describe the bug (Using version 5.4.2)

I'm rendering the library inside a shadow DOM, and updated my material UI theme to render portals, like in Mui docs (https://mui.com/material-ui/guides/shadow-dom/):

const theme = createTheme({
  components: {
    MuiPopover: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
    MuiPopper: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
    MuiModal: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
  },
});

However, the dropdown of the library (which is Mui Autocomplete) completely loses its stylings, it just displays a text list with no container and no scroll. Maybe the library uses disablePortal set to true? Is there a way to have the library work inside a shadow DOM?

Thanks in advance

To Reproduce Wrap the library in a shadow DOM

Expected behavior Have same stylings

omerfaran commented 1 year ago

Alternatively is it possible to render your own Select/Autocompelte? I found this thread from 2019, but the attached link not working: https://github.com/ukrbublik/react-awesome-query-builder/issues/109

Thanks

omerfaran commented 1 year ago

What I found is that you can intercept each relevant component and force it to using the app's Mui theme that does have a reference to the shadow DOM, something like:

      settings: {
        ...MuiConfig.settings,
        renderField: (props) => (
          <WithTheme>
            {MuiConfig.settings.renderField(props)}
          </WithTheme>
        ),
      },

That way, even though React awesome query builder defines its own theme, you can come "in between" and force components back into your defined shadow DOM

Hope it helps anyone, It's certainly not a bug of the app, just something to deal with

ukrbublik / react-awesome-query-builder

Rendering the library inside a shadow DOM? #974