如何在Material UI Dialog中显示Downshift建议列表？

I’ve run into this exact headache before—Material-UI’s Dialog has some default styling that can easily clip or overlay nested dropdown components like Downshift. Let’s get your suggestion list showing above the Dialog properly:

Root Cause #

The problem boils down to two common issues:

1. Dialog’s high default z-index: Material-UI Dialogs use a z-index of 1300 by default, which often sits above Downshift’s menu default z-index.
2. Overflow clipping: The Dialog’s content container typically uses overflow: auto or overflow: hidden, cutting off any content that extends outside its bounds—including your dropdown list.

Solution 1: Boost Menu Z-Index & Adjust Positioning #

First, explicitly set a higher z-index for your Downshift menu and use absolute positioning to break out of the Dialog’s content flow:

// Inside your Downshift render prop
{isOpen && (
  <div 
    style={{
      position: 'absolute',
      zIndex: 1400, // Higher than Dialog's default 1300
      backgroundColor: 'white',
      border: '1px solid #e0e0e0',
      borderRadius: 4,
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      marginTop: 8,
      width: '100%',
      maxHeight: 200,
      overflowY: 'auto'
    }}
  >
    {filteredItems.map(item => (
      <div 
        {...getItemProps({ item })}
        style={{ padding: '8px 16px', cursor: 'pointer' }}
        key={item}
      >
        {item}
      </div>
    ))}
  </div>
)}

Solution 2: Use Material-UI Popper (More Reliable) #

For a foolproof fix, wrap the Downshift menu in Material-UI’s Popper component. Popper automatically mounts the menu to the <body> (outside the Dialog’s DOM tree), avoiding overflow clipping entirely, and gives you precise control over positioning:

import Popper from '@material-ui/core/Popper';
import { useRef } from 'react';

// Inside your component
const inputRef = useRef(null);

return (
  <Dialog open={true} onClose={handleClose}>
    <DialogContent>
      <Downshift>
        {({ getInputProps, getItemProps, isOpen, inputValue }) => {
          const filteredItems = countries.filter(item => 
            item.toLowerCase().includes(inputValue.toLowerCase())
          );
          return (
            <div>
              <input 
                {...getInputProps({ 
                  placeholder: 'Search a country',
                  ref: inputRef
                })}
                style={{ width: '100%', padding: '8px' }}
              />
              <Popper 
                open={isOpen}
                anchorEl={inputRef.current}
                placement="bottom-start"
                style={{ zIndex: 1400 }}
              >
                <div 
                  style={{
                    backgroundColor: 'white',
                    border: '1px solid #e0e0e0',
                    borderRadius: 4,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                    width: '100%',
                    maxHeight: 200,
                    overflowY: 'auto'
                  }}
                >
                  {filteredItems.map(item => (
                    <div 
                      {...getItemProps({ item })}
                      style={{ padding: '8px 16px', cursor: 'pointer' }}
                      key={item}
                    >
                      {item}
                    </div>
                  ))}
                </div>
              </Popper>
            </div>
          );
        }}
      </Downshift>
    </DialogContent>
  </Dialog>
);

Quick Tips #

• If 1400 doesn’t work, check your Dialog’s actual z-index via browser dev tools—custom themes might adjust this value.
• Popper is the better long-term fix because it avoids fighting with the Dialog’s overflow constraints, especially if your Dialog has scrollable content.
• Don’t forget to attach a ref to your input so Popper knows where to anchor the menu.

内容的提问来源于stack exchange，提问作者Frntz