Material-ui: [TextField] Stays focused permanently if disabled is set to true while focused

[jwheeler-gs]

If a text field is focused by the user when it is disabled via props, the input has its focused visual style retained (label and line under the text remain highlighted in primary color). I tried to work around the issue by calling .blur() on the underlying input element before setting disabled={true}, but it appears that calling .blur() on the input also does not cause the visual styling for TextField to be updated and the input looks like it is still focused. I am not sure if this is the same or a different issue.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'd expect an input to blur when disabled is set to true if it is focused. Additionally, I'd expect the visual styling to not appear focused when the input is no longer focused.

Current Behavior

Setting disabled=true or calling blur on a focused input does not update the visual styling while the input is focused.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/pp0jl9jzq

1. Type two characters in the first input to cause it to be disabled.
2. Click/type in the second input. Notice that both inputs are focused.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.17 |
| React | 15.6.x |
| browser | Chrome |

[mpaarating]

If no one minds, I am looking into this issue!

[oliviertassinari]

@mpaarating Yes, please go ahead :).

[oliviertassinari]

@mpaarating Any lead?

[mpaarating]

@oliviertassinari it looks like the focused state on the Input component isn't getting updated when handleBlur is getting run. I've not had a chance to have a stab at fixing it, so if you can knock it out, go ahead!

[oliviertassinari]

@mpaarating Thanks for the info. I will have a look at it 💣.