TextField loses focus when InputAdornment is clicked

[ee92]

The new version of TextField loses focus when the InputAdornment is clicked. This seems undesirable.

• 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 🤔

The older (v1) TextField retains focus when Adornment is clicked:

Current Behavior 😯

The new TextField loses focus when Adornment is clicked:

Steps to Reproduce 🕹

Compare versions
v1: https://v1.material-ui.com/demos/text-fields/#input-adornments
v4: https://material-ui.com/components/text-fields/#input-adornments

Context 🔦

This behavior is annoying for password fields or any other field that the user might want to keep editing after clicking an adornment.

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1
Browser	all

[oliviertassinari]

@ee92 This is the Google login form input, this seems like a great baseline to follow:

The logic was lost in this diff 8b5cd6a#diff-3d0c58268ffed10a2bd03ed4b6799ebb.

diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
--- a/docs/src/pages/components/text-fields/InputAdornments.js
+++ b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -57,10 +57,6 @@ class InputAdornments extends React.Component {
    this.setState({ [prop]: event.target.value });
  };

- handleMouseDownPassword = event => {
-   event.preventDefault();
- };

  handleClickShowPassword = () => {
    this.setState(state => ({ showPassword: !state.showPassword }));
  };
@@ -130,7 +126,6 @@ class InputAdornments extends React.Component {
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={this.handleClickShowPassword}
-                 onMouseDown={this.handleMouseDownPassword}
                >
                  {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>

I can't find any motivation for this change in #12076. I would propose that we go in your direction, that we revert.

Do you want to submit a pull request? :)

[ee92]

@oliviertassinari I created PR (#16672) to revert the logic in the InputAdornment demos.

Perhaps this should be a property of InputAdornment? Something like ignoreFocusOnClick. What do you think?

[onzag]

This solution does not work for me.

The location of the element is lost in chrome, it goes back to the begining (but not on firefox, on firefox it works flawlessly).

I attempted different ways, from focusing manually, but the location always goes back to the beggining.

Google Chrome 80.0.3987.100 beta
Google Chrome 80.0.3987.100
Google Chrome 81.0.4044.26 beta

Tested on all of them, same behaviour.

public toggleVisible(e: React.MouseEvent) {
    e.stopPropagation();
    e.preventDefault();
    this.setState({
      visible: !this.state.visible,
    });
    this.inputRef.focus(); // tested with and withtout these
  }

  // onMouseDown of the addornment, onBlur of the text field
  public preventEverything(e: React.MouseEvent) {
    e.stopPropagation();
    e.preventDefault();
    this.inputRef.focus(); // tested with and without these
  }

[paulgarbas]

Use onMouseDown instead of onClick and insert e.preventDefault() after the desired logic.

[YOEL311]

Hi friends I am still having this problem
What should I do

  "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^v4.0.0-alpha.8",
    "@material-ui/styles": "^4.10.0",

 <OutlinedInput
              required
              fullWidth
              type="tel"
              id="number"
              className={classes.inputForm}
              name="number"
              autoComplete="number"
              autoFocus
              onChange={(e) => setPhoneNumber(e.target.value)}
              onBlur={() => setShowError(true)}
              onFocus={() => setShowError(false)}
              error={showError && !isValidNumber}
              value={number}
              disabled={verified}
              
              startAdornment={<InputAdornment position="start">{'Phone'}</InputAdornment>}
              inputProps={{
                'aria-label': 'weight',
                className: classes.unaffected,
              }}
              labelWidth={0}
            />