While in full screen dropdown inputs don't work #7

shanno1 · 2022-02-22T16:30:11Z

This is what happens when I select the dropdown dialog with label Area Filter. Inputs do not work at all for some reason while full screen is open.

vasilevich · 2022-02-23T02:11:49Z

it could be that it is not a real dropdown element, but a fake one, in the form of a floating div near the dropdown button.

make sure that said div is generated inside the "full screen" component, sometimes they tend to be made in the <body> FullScreen component typically takes a subset of your inner react root tree with a couple of children, the dropdown element is probably not even within the full screen component..

Check chrome dev tools to be sure.

If what is mentioned above accurate, check if there is a way to tell the dropdown component to generate the dropdown somewhere within a specific id or classname and give it the classname/id of the parent of the dropdown button for example.

check maybe the component already has an option for that as a prop.

dogcity · 2024-02-06T15:00:12Z

Hi, could you solve this, I have the same problem with the autocomplete component of Mataerial-ui. I have not been able to solve it.
Any example of how to solve the problem?

Thank you,
Regards.

arcasoy · 2024-02-06T16:52:02Z

Hey all! I had the same issue with this package and MUI. It's solvable by performing the following:
App.tsx:

import Fullscreen from 'react-fullscreen-crossbrowser';
import { bindMuiComponentsToHTMLContainer, createThemeWithDefaults } from '../../utils/theme-helpers';
import { cloneDeep } from 'lodash';

const FullScreenDemoComponent: React.FC<Viewer3DProps> = (props) => {
  const [muiTheme, setMuiTheme] = useState<object>({});
  const fullscreenNodeRef = useRef<Fullscreen | null>(null)

  useEffect(() => {
    let themeBuildObj: object | undefined = cloneDeep(props.theme)
    if (fullscreenNodeRef.current && fullscreenNodeRef.current.node) {
      themeBuildObj = bindMuiComponentsToHTMLContainer(fullscreenNodeRef.current.node, themeBuildObj)
    }
    const themeToApply = createThemeWithDefaults(themeBuildObj)
    setMuiTheme(themeToApply);
  }, [props.theme, fullscreenNodeRef.current]);

  return (
    <ThemeProvider theme={muiTheme}>
          <Fullscreen ref={fullscreenNodeRef}>
            <RestOfMyApp />
          </Fullscreen>
    </ThemeProvider>

theme-helpers.ts (where called functions are defined)

import { createTheme } from '@mui/material';
import { merge } from 'lodash';

export const createThemeWithDefaults = (themeToDecorate: object | undefined) => {
  // Global MUI theme overrides are here
  const defaultMuiTheme: any = {
    components: {
      MuiCssBaseline: {
        styleOverrides: {
          '*': {
            scrollbarWidth: 'auto',
            scrollbarColor: '#0061a1 #ffffff',
          },
          '*::-webkit-scrollbar': {
            width: '8px',
            height: '8px',
          },
          '*::-webkit-scrollbar-track': {
            background: '#c4c4c426',
          },
          '*::-webkit-scrollbar-thumb': {
            backgroundColor: '#0061a1',
            borderRadius: '10px',
          },
        },
      },
    },
    palette: {
      mode: 'light',
      primary: {
        main: '#1598f7',
        dark: '#0c5bea',
      },
      secondary: {
        main: '#fb20f8',
      },
      success: {
        main: '#1cc522',
      },
      divider: 'rgba(152,152,152,0.21)',
    },
    typography: {
      fontFamily: 'Fira Sans',
    },
    spacing: 8,
    props: {
      MuiAppBar: {
        backgroundColor: 'default',
        color: 'transparent',
      },
    },
  };

  // default as first argument since second argument applies over the first
  const decoratedTheme = createTheme(defaultMuiTheme, themeToDecorate ? themeToDecorate : {});

  return decoratedTheme;
};

export const bindMuiComponentsToHTMLContainer: (ele: HTMLElement, inputTheme?: object) => object = (ele: HTMLElement, inputTheme?: object) => {
  // input as first argument since second argument applies over the first
  return merge(inputTheme, {
    components: {
      MuiPopover: {
        defaultProps: {
          container: ele,
        },
      },
      MuiPopper: {
        defaultProps: {
          container: ele,
        },
      },
      MuiModal: {
        defaultProps: {
          container: ele,
        },
      },
    },
  });
};

These two functions could be combined but in my use case they are sometimes needed separately. The solution to your problem is at the very end of the second code block, the bindMuiComponentsToHTMLContainer() function, passing in an input element and setting it the global MuiPopover, MuiPopper, and MuiModal container to that element. Select and other MUI components are built off of those, so this should handle fullscreen element parenting for any element in your whole app.

Some use-case specific code has been removed for simplicity sake, so let me know if you have any questions regarding decisions made and if this helped resolve the problem at hand.

@shanno1 @vasilevich @dogcity

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

While in full screen dropdown inputs don't work #7

While in full screen dropdown inputs don't work #7

shanno1 commented Feb 22, 2022

vasilevich commented Feb 23, 2022 •

edited

Loading

dogcity commented Feb 6, 2024

arcasoy commented Feb 6, 2024 •

edited

Loading

While in full screen dropdown inputs don't work #7

While in full screen dropdown inputs don't work #7

Comments

shanno1 commented Feb 22, 2022

vasilevich commented Feb 23, 2022 • edited Loading

dogcity commented Feb 6, 2024

arcasoy commented Feb 6, 2024 • edited Loading

vasilevich commented Feb 23, 2022 •

edited

Loading

arcasoy commented Feb 6, 2024 •

edited

Loading