Material-ui: [TextField] Floating label does not recover after hovering the autofill suggestions

[mihaela-kokoon]

I noticed that starting with version 4.4.3 of the Material UI (https://v4-4-3.material-ui.com/components/text-fields/ this has been used in the GIF provided as demo) if you hover the autofill suggestion but you don't select one and click away, the label remains floated up and does not animated back to placeholder position.
On earlier versions of Material UI (eg. https://v4-3-3.material-ui.com/components/text-fields/) the issue is not reproducible.

Is this something which can be fixed on Material UI side OR has to do with the way browsers handle autofill suggestions? Thank you!

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Notice that the label didn't animate back to placeholder and is still floating.

Expected Behavior 🤔

The floating label should animate back to placeholder position when clicking away even if no selection has been made.

Steps to Reproduce 🕹

You can use this link to reproduce https://v4-4-3.material-ui.com/components/text-fields/
I also attached a GIF to demonstrate the behavior.

Steps:

1. Focus an input
2. The label is floated up
3. Hover the list of autofill suggestions, BUT don't make any selection
4. Click away
5. Notice that the label didn't animate back to placeholder and is still floating.

Context 🔦

Not blocking, just UI bug.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | > v4.4.3 |
| React | ^16.13.1 |
| Browser | Chrome Version 81.0.4044.138 |

[oliviertassinari]

@mihaela-kokoon Do you have a reproduction with the latest version?

[mihaela-kokoon]

@oliviertassinari Here it is a GIF with the latest version and the bug reproducing:

Here is also the codesandbox link: https://codesandbox.io/s/unruffled-shirley-62q2e?file=/src/Demo.js

[oliviertassinari]

@mihaela-kokoon Thanks for reporting this regression, from https://github.com/mui-org/material-ui/issues/14427#issuecomment-534277159. Could you confirm this fix?

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 2b1f12b2b..eb62c96c3 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -31,12 +31,8 @@ export const styles = (theme) => {

   return {
     '@global': {
-      '@keyframes mui-auto-fill': {
-        from: {},
-      },
-      '@keyframes mui-auto-fill-cancel': {
-        from: {},
-      },
+      '@keyframes mui-auto-fill': {},
+      '@keyframes mui-auto-fill-cancel': {},
     },
     /* Styles applied to the root element. */
     root: {
@@ -98,6 +94,7 @@ export const styles = (theme) => {
       minWidth: 0,
       width: '100%', // Fix IE 11 width issue
       animationName: 'mui-auto-fill-cancel',
+      animationDuration: '10ms',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -391,10 +388,12 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }

If it does work, do you want to submit a pull request? :)

[mihaela-kokoon]

@oliviertassinari Thanks a lot for the fast answer! Appreciate it! I'll make some time (hopefully this weekend) and will check it! Cheers!