[question] MUI Select Menu Displaying Behind Elements in Figma Design Kit

[danielJordan1]

The problem in depth

The menu component in the Figma version of the MUI Select list appears behind any elements it overlaps. See the attached video for reference. What changes can be made in the Material UI Figma design kit to ensure the select list items display on top of other elements? I’ve already tried reordering frames and testing in different contexts. I’d prefer not to detach the instance and manually layer it on top, as this would result in losing the prototype functionality.

Screen.Recording.2025-01-13.at.12.30.17.mov

Your environment

No response

Search keywords: MUI Figma Select Menu Dropdown Layering Issue Z-Index Prototyping Design Kit Instance Menu Visibility

[adrianmanea]

Hi Daniel, go to the parent container auto layout settings which contains the and the Card below and change to "First on top".

[danielJordan1]

Thanks for your response! I used this method, but we’re encountering a similar issue while building stacked form fields with multiple select fields in a different context. See the video for reference.

Can the menu items be displayed above without placing each form field in its frame?

Screen.Recording.2025-01-14.at.12.50.22.mov

[adrianmanea]

Hi Daniel, select the Instance #1 layer which is the parent that contains your form fields and apply the "First on top".