Blur event doesn't remove focus from Input inside the TextField component in mobile [issue already with a possible Fix]

[fabiozaffani]

This problem is related to the component TextField in the following file
https://github.com/mlaursen/react-md/blob/1e709eb98a5933c6199db127865edea68ef45dd4/src/js/TextFields/TextField.js

At line 456 and 457 you will find

fn('mousedown', this._handleOutsideClick);
fn('touchstart', this._handleOutsideClick);

which reference the following function in line 611

_handleOutsideClick(e) {
    if (!this._node.contains(e.target)) {
      this._blur();
    }
  }

All of this will trigger a blur on the Input container (the TextField component) but will not trigger a blur on the inner input field. This problem can be detected in mobile when you touchstart scrolling the page. The TextField will lose its focused layout (label back to it's place and colors removed) but the cursor will still be inside the Input field which will be focused. Testing locally a simple fix was to add a line in the function above, which will become:

_handleOutsideClick(e) {
    if (!this._node.contains(e.target)) {
      this._blur();
      this._field.blur(); // remove the focus from the input field
    }
  }

Another better fix to keep everything consistent would be to add it as a callback to the setState of the _blur function (line 600), which would then become:

_blur() {  
    const value = this._field.getValue();

    const state = { active: false, error: this.props.required && !value };
    if (!this.props.block) {
      state.floating = !!value;
    }

    this.setState(state, () => this._field.blur());
  }

I can make a PR if you want, just tell me which fix you think it's better and which suits better your coding choice.

Tested in

• React 15.4.2
• React-MD 1.0.13
• Browser Chrome 58.0.3029.96 (64-bit)

[mlaursen]

I think the first approach would be best just since the keydown (tab) listener also calls the blur function and might trigger 2 blur events? If it doesn't, I like the second approach better.

I'd welcome a pull request if you have the time!

[mlaursen]

I actually had time today and implemented your second suggestion. Thanks!

[fabiozaffani]

Hi @mlaursen , sorry by the delay, just saw your response but you fixed it already :)

Btw, you are doing an amazing job with this library, having already used the react material ui library, google-md (now discontinued), react-toolbox and implementend my own I can confidently say that yours are, by far the best one around.

You even have deprecated notices in the documentation! Never saw that before in a one man only open source library.

Once again, congratz!