Unable to engage with any items on the display when the Material UI (MUI) Select Menu is active

In my web application, I am utilizing Material UI's Select component. Upon using it, I encountered a restriction where the user is unable to interact with anything else on the screen while the Select menu is open. This includes the inability to click on other objects, trigger hover events, or even scroll until the menu is closed.

It appears that Material UI implements an invisible backdrop that appears when a Select menu is opened, essentially locking the user into interacting only with the menu. However, I am aiming to implement a feature where users can still interact with other parts of the application while the dropdown menu remains open – much like how Uber's main page allows users to navigate through different sections while a dropdown menu in the navigation bar is open.

Is there a solution to disable or work around this invisible backdrop? I have attempted setting the z-index of surrounding elements higher than that of the backdrop, but this method feels like a temporary fix and does not consistently solve the issue.

View code / demo: https://codesandbox.io/s/practical-ully-fsfgpj

Having a reliable approach to address this limitation would be greatly beneficial.

cssreactjsmaterial-ui

Answer №1

If you're looking for a component similar to Select, consider using Popper instead.

Popper is another option for rendering a dropdown menu with different positioning strategies. As mentioned in the documentation:

The Menu component uses the Popover component internally. However, you might want to use a different positioning strategy, or not blocking the scroll. For answering those needs, we expose a MenuList component that you can compose, with Popper in this example.

By utilizing Popper, you can achieve similar functionality without relying on the Select component.

For example:

<Button
  ref={anchorRef}
  id="composition-button"
  aria-controls={open ? "composition-menu" : undefined}
  aria-expanded={open ? "true" : undefined}
  aria-haspopup="true"
  onClick={handleToggle}
>
  Dashboard
</Button>
<Popper
  open={open}
  anchorEl={anchorRef.current}
  role={undefined}
  placement="bottom-start"
  transition
  disablePortal
>
  {({ TransitionProps, placement }) => (
    <Grow
      {...TransitionProps}
      style={{
        transformOrigin:
          placement === "bottom-start" ? "left top" : "left bottom"
      }}
    >
      <Paper>
        <MenuList
          autoFocusItem={open}
          id="composition-menu"
          aria-labelledby="composition-button"
          onKeyDown={handleListKeyDown}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </MenuList>
      </Paper>
    </Grow>
  )}
</Popper>

You can find more details and examples in the provided documentation link above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the visibility of a child component's div from its parent component in React

My goal is to switch between two different views of the child component called BottomSheet. To achieve this, I am passing the toggleConfig prop to the child component. However, despite my efforts, it seems that pressing the "Toggle Config" button does not ...

reactjsreact-hooks

Ways to prevent scrolling or switching to the next tab when my javascript function yields a false result

//HTML Code <div id="navigation1"> <ul> <li><a href="#"><input type="submit" value="Next" onClick="return checkfhname()" /></a></li> </ul> </div> Whenever my Javascript function checkfhname() r ...

phpjavascriptjqueryhtmlcss

Could not establish a connection with 'http://localhost:3001/user/signup' due to a breach of the Content Security Policy in a web application built with React and Node.js

Currently in the process of developing a signup page with React, utilizing Node JS for the Backend. Encountering an issue when attempting to call the signup api on the Backend as it results in the following error message: "api.js:31 Refused to connect to & ...

javascriptreactjsnode.jsnext.jsfrontend

Encountering a DOM exception with React 16.6 due to lazy loading/Susp

I am currently working on implementing dynamic import in my React application. Most of the React examples I have seen involve rendering the application to a specific tag and replacing its content, like this: ReactDOM.render(<App />, document.getEle ...

javascriptreactjs

Decrease the gap between the ticks on a horizontal bar chart in ChartJS

Currently, I am utilizing the horizontal bar chart feature from chartjs and encountering an issue with the chart appearing too large. In addition, there is a notable gap between the ticks on the xAxis (as shown in the attached image). Does anyone know how ...

javascripthtmlcssangularjschart.js

utilize undefined files are assigned (Typescript, Express, Multer)

I am facing an issue while trying to save image uploads to a folder named "/images". The problem lies in the fact that req.files is appearing as undefined for some reason. Below is the relevant code snippet. Feel free to ask any questions, any assistance w ...

reactjstypescriptexpressundefinedmulter

Leveraging passport-google-oauth in combination with react-native

I'm currently integrating passport-google-oauth into my react-native project. However, upon running the application, I encounter an error: requiring unknown module util. I have already used both npm install .. and npm install ... --save commands for p ...

node.jsoauthnpmreactjsreact-native

CSS-Styled Vertical Timeline

I have been working on creating a vertical timeline with icons embedded within it. I initially used this as a reference point. I was able to achieve the desired layout by adding extra spans inside the div. However, the end result appears somewhat cluttere ...

htmlcss

Utilizing yarn workspaces and the yarn link feature in your project is

In my workspaces project, the structure is as follows: /project - package.json /packages /project-a package.json /project-b package.json The project-b relies on project-a. In the workspaces setup, everything works ...

reactjsnpmyarnpkglerna

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

jquerycsstinymce

What is the best way to implement Material-UI Autocomplete along with virtual scrolling in my project?

Exploring different possibilities for enhancing Material-UI Autocomplete with virtualization libraries. One example is the utilization of the react-window library in MUI's showcases. However, this method may require familiarity with item heights, addi ...

material-ui

The onClick event handler is executed during every rendering process

Initially, my default state is set as follows: this.state = { selectedTab : 'tab1' } When it comes to rendering, this is how I define it: render(){ const { selectedTab } = this.state; return( <li>tab1</li><li>ta ...

javascriptreactjs

Modify the font color within a JavaScript countdown

I'm trying to create a timer that changes the font color of a div with the ID "clear" at the one-minute and two-minute marks. However, I'm having trouble getting it to work properly. var ho1 = document.getElementsByTagName('ho1')[0], ...

javascriptcsstimercolors

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui

Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array. I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using a hard ...

reactjstypescriptdommaterial-uiobject-literal

How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: https://i.sstatic.net/0mXMm.png I have 2 questions: Which HTML element should I us ...

htmlcsstwitter-bootstrap

The validation process in Redux forms

Imagine we have the following types defined: interface MyFormFields { FirstName: string; LastName: string; } type FieldsType = keyof MyFormFields; const field1: FieldsType = "c"; const field2 = "c" as FieldsType; Now, I am looking to implemen ...

reactjstypescriptredux-form

transferring information within React applications

I created a basic online store and I am looking to transfer data from one JavaScript file to another. The first JS file displays the items, and then I want to pass the item data to cart.js which contains a table. <section className="products"> ...

javascriptreactjsuser-interfacefrontend

The footer that constantly changes

I am looking to dynamically position my footer at the bottom of the page. The footer should be fixed at the bottom. If the page content exceeds the viewport, the footer should automatically adjust its position. html { position: relative; m ...

htmlcssfooter