[Popper] Placeholder text from TextField is appearing inside Popper.

[2brownc]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a Popper component is displayed above an TextField component, the place holder text of TextField is appearing inside the Popper.

Expected behavior 🤔

No content of the TextField component should appear on the Popper when Popper displays above TextField.

Steps to reproduce 🕹

Live Example: https://codesandbox.io/s/determined-black-85vufb?file=/demo.js

Steps:

1. Make sure the Popper displays above a TextField
2. Click on "Toggle Popper" button to display Popper.
3. See that placeholder text of TextField being displayed inside the Popper.

Context 🔦

I am trying to display a Popper to help the user when filling a form thus the issues with Popper and TextField.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.18 undefined
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.15.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 103.0
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.91 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/material: ^5.9.2 => 5.9.2 
    @mui/private-theming:  5.9.1 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.9.2 
    @mui/types:  7.1.5 
    @mui/utils:  5.9.1 
    @types/react:  18.0.15 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.7.4 

I used Firefox. The issue is same with chromium based browsers.

[2brownc]

Seems relevant: https://medium.com/nerd-for-tech/complete-guide-to-z-index-in-css-9f09550ae886

[PunitSoniME]

Fix added

[hbjORbj]

Why don't you add sx={{ zIndex: 1 }} to the Popper component?

Here's a working example: https://codesandbox.io/s/loving-forest-vgsefx

I don't think that we need to add style to the implementation for this specific use case.

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Issue linked to:

• [docs] Split button with popper z-index issue #33762 (comment)
• Popper not working with drawer #19486 (comment)