search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.87k stars 32.26k forks source link

Password Field placehoder line height problem #11896

Closed ghost closed 6 years ago

ghost commented 6 years ago

TextField provides an option to use endadornment to add rich features/symbols, which can be used to provide password hide/show feature. When such Password TextField with placeholder is used, placeholder flutters (chrome)/moves (safari) on visibility endadornment toggle for screen size 1280x800.

Expected Behavior

On endadornment toggle, the position of placeholder should remain the same and must not flutter (chrome)/move (safari).

Current Behavior

On endadornment toggle, the position of placeholder flutters (chrome)/moves (safari). Please see https://i.imgur.com/cbjYbo5.gifv for details.

Steps to Reproduce (for bugs)

The codesandbox.io template : https://codesandbox.io/s/8l95no30l

  1. Click on Visibility icon
  2. Observe that password placeholder moves down
  3. Now click on VisibilityOff icon
  4. Observe that password placeholder moves up

Your Environment

Tech Version
Material-UI v1.2.1
React 16.4.0
Device MacBook Pro 13" (1280x800)
oliviertassinari commented 6 years ago

@niyatip25 I can't reproduce the issue on a MacBook Air 11" 2015 (1366 x 768). Let us know if you find a workaround, but for now. I'm gonna assume it's a rendering issue with Chrome.