IE Edge - TextField placeholder doesn't disappear when field is not focused

[rodrigoea]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Placeholder should disappear when the field is not focused (IE Edge).

Current Behavior 😯

Placeholder and Label are being displayed over top of each other.

Steps to Reproduce 🕹

As this is easy to reproduce, I've recorded a gif so we can easily see below.

Access the link listed below from a IE Edge browser.

Link:

1. https://material-ui.com/demos/text-fields/

Context 🔦

I found this bug trying to access an application that uses 2FA. When It asked to paste the received code, I've clicked outside the window and realized that bug.

Your Environment 🌎

Tech	Version
Material-UI	v3.8.2
React	16.8.0
Browser	IE Edge
TypeScript	-
etc.	-

[oliviertassinari]

Could it be a regression? We have a dedicated logic for it.
https://github.com/mui-org/material-ui/blob/bd7f1e75627682f32706794bea8cf9305d8f7cdd/packages/material-ui/src/InputBase/InputBase.js#L109

[joshwooding]

Tried this on edge, looked fine to me?

[joshwooding]

Looks like it's broken on IE11 though (unlike edge this was tested on next)

[oliviertassinari]

I have tried with Edge 18. It's working fine.

[oliviertassinari]

@rodrigolabs Could you provide us more information on the reproduction. IE 11 issue seems to be "normal" the browser hides the placeholder once the input is focused. Edge is good on our side.

[oliviertassinari]

I'm closing for now.

[rodrigoea]

@rodrigolabs Could you provide us more information on the reproduction. IE 11 issue seems to be "normal" the browser hides the placeholder once the input is focused. Edge is good on our side.

Thanks for the replies :)

@oliviertassinari

Well, I've just recorded a new reproduction. I don't know if you guys were testing as expected, but this is what I did:

• Focus the text field
• Click in the Address Bar
• Label and Placeholder will overlap

See the new preview, tested with Edge:

[oliviertassinari]

@rodrigolabs This is the only workaround I can find:

--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -104,7 +104,10 @@ export const styles = theme => {
         '&::-webkit-input-placeholder': placeholderHidden,
         '&::-moz-placeholder': placeholderHidden, // Firefox 19+
         '&:-ms-input-placeholder': placeholderHidden, // IE 11
-        '&::-ms-input-placeholder': placeholderHidden, // Edge
+        '&::-ms-input-placeholder': {
+          ...placeholderHidden,
+          color: 'transparent',
+        }, // Edge
         '&:focus::-webkit-input-placeholder': placeholderVisible,
         '&:focus::-moz-placeholder': placeholderVisible, // Firefox 19+
         '&:focus:-ms-input-placeholder': placeholderVisible, // IE 11

But we lose the opacity animation. What do you prefer?

[rodrigoea]

@oliviertassinari it seems that if we put a !important in placeholderHidden, it works fine:

const placeholderHidden = {
  opacity: 0 !important,
};

I think we won't lose the opacity animation with that. What's your opinion?

[oliviertassinari]

@rodrigolabs wow, that's awesome! I confirm the resolution. Do you want to submit a pull request? :)

[rodrigoea]

@oliviertassinari Sure, I'll be happy to do that! :)
I'll open the PR and mention you there.

[robmarshall]

This seems to have regressed when using Preact on Chrome.