Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cursor jumps to the start of input when changing input type

See original GitHub issue

[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 😯

Expected Behavior 🤔

Cursor preserves its position when changing input type

Steps to Reproduce 🕹

Steps:

Create textfield with password input type and visibility toggler like this: https://material-ui.com/components/text-fields/#input-adornments
Input some text
Click password visibility icon button
Cursor jumps to the start of input

Context 🔦

Your Environment 🌎

Version 90.0.4430.85 (Official Build) (x86_64)

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:11 (5 by maintainers)

Top GitHub Comments

7reactions

juliomoreiracommented, May 2, 2021

I found a workaround to this problem by calling preventDefault() on the onMouseUp event as well.

https://codesandbox.io/s/admiring-bash-htted?file=/pages/index.js

I wasn’t able to track down this bug but I don’t think it’s React fault since it works properly on CRA.

Hope it helps

1reaction

jiblett1000commented, Dec 5, 2022

I found a workaround to this problem by calling preventDefault() on the onMouseUp event as well.

https://codesandbox.io/s/admiring-bash-htted?file=/pages/index.js

I wasn’t able to track down this bug but I don’t think it’s React fault since it works properly on CRA.

Hope it helps

I tried this same strategy on a Vue project. It works beautifully. Much appreciated.