[material-ui][TextField] Screen flickering when typing in Chrome mobile

[vicasas]

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-text-field/#form-props

Steps:

1. Go to the URL of the TextField documentation using Chrome mobile in iOS.
2. In the first input of the second demo, "Form Props," start typing.
3. You will notice that the top part of the keyboard begins to flicker.

Current behavior

As soon as I start typing in the input field on Chrome mobile, the screen starts flickering, specifically the top bar of the keyboard.

Using iOS 17.

RPReplay_Final1726660053.mp4

Expected behavior

The expected behavior is that typing in the input field should not cause the screen to flicker.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: iOS 17.6.1
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.46
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.0 
    @mui/icons-material: ^6.1.0 => 6.1.0 
    @mui/lab: ^6.0.0-beta.9 => 6.0.0-beta.9 
    @mui/material: ^6.1.0 => 6.1.0 
    @mui/material-nextjs: ^6.1.0 => 6.1.0 
    @mui/private-theming:  6.1.0 
    @mui/styled-engine:  6.1.0 
    @mui/system:  6.1.0 
    @mui/types:  7.2.16 
    @mui/utils: ^6.1.0 => 6.1.0 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.5.2 => 5.5.2 

Search keywords: TextField, Flickering, Typing

[DiegoAndai]

Thanks for the report @vicasas! I can confirm the behavior, and it seems like a bug. It's present in v5 and v6. There are also similar reports on other platforms:

• Keyboard Flickering on TextInput with secureTextEntry facebook/react-native#39411
• iOS Keyboard flickers when switching the TextFields which have obscureText set to true flutter/flutter#88354
• https://discussions.apple.com/thread/255303223?answerId=259911032022&sortBy=rank#259911032022

This makes me think it's not entirely an issue on Material UI's side, although there might be something we can do, as:

• The iOS keyboard seems to be incorrectly prompting the password utilities banner on a non-password input
• In the same demo, the password example doesn't show this issue, even though the password utilities banner is present. The other text fields that don't show the password utilities banner do not have flickering either.

I wonder if there's a workaround for controlling the showing/not showing of the password utilities banner 🤔

Adding the "ready to take" label in case anyone wants to help us debug this. Please don't open a PR without discussing the possible cause of the issue beforehand.

@vicasas may I ask you what device model you are using?

[vicasas]

@vicasas may I ask you what device model you are using?

I tested this on an iPhone 14 Pro Max, and after updating to iOS 18, the flickering issue with the password utility bar while typing seems to have disappeared, as I was unable to replicate it again. However, some related issues persist:

• When navigating through an input field using the keyboard arrows, the password utility bar flickers.
• While typing in the input field, the three-dot icon on the left side of the address bar also flickers.
• The password utility bar still appears in fields that are not passwords.

[AdamTechAcc]

I've same problem.

[Austin1serb]

I feel like this might be related, something is causing the password suggestion to re-render. This is on MacBook(14.6.1 (23G93)), Safari
When I focus the password field, and slowly scroll with the trackpad the password suggestion flashes. The issue does not occur when scrolling with the scrollbar.

Screen.Recording.2024-11-12.at.12.02.39.PM.mov

[Austin1serb]

I feel like this might be related, something is causing the password suggestion to re-render. This is on MacBook(14.6.1 (23G93)), Safari When I focus the password field, and slowly scroll with the trackpad the password suggestion flashes. The issue does not occur when scrolling with the scrollbar.

Screen.Recording.2024-11-12.at.12.02.39.PM.mov

I recently Tested this in other places, and this happens in native HTML also, so its an external issue

[DiegoAndai]

I'm closing this as it seems to be an external issue (it also happens in native HTML). Feel free to reopen in case you are experiencing this issue and it doesn't happen in native HTML.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vicasas How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.