Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextField] Fix unfocused state when disabled #7283

Merged
merged 4 commits into from Jul 4, 2017
Merged

[TextField] Fix unfocused state when disabled #7283

merged 4 commits into from Jul 4, 2017

Conversation

xaviergonz
Copy link
Contributor

@xaviergonz xaviergonz commented Jun 28, 2017 •
edited

Basically I found out that if the component is currently focused and then becomes disabled while it is then it will be stuck in focused state until it becomes enabled again.
Even then, since the blur event does not get emitted for some reason (yet it becomes blurred), then once it becomes enabled again you have to manually focus and unfocus it again for it to get the unfocused state.

This PR fixes this by making sure the focused state is set to false when disabled is set to true.

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

@xaviergonz xaviergonz changed the title [TextField ] Fix to set unfocused when component becomes disabled [TextField] Fix to set unfocused when component becomes disabled Jun 28, 2017
@xaviergonz
Copy link
Contributor Author

xaviergonz commented Jun 28, 2017 •
edited

Out of curiosity, should it call this.blur(); in this case? this will ensure 100% the component itself is blurred then (although it really becomes so anyway).

@oliviertassinari
Copy link
Member

should it call this.blur(); in this case?

I'm wondering what the default behavior with a native button. I would expect the browser to trigger a blur. Maybe we should only handle that event.

@xaviergonz
Copy link
Contributor Author

I would expect it to be the case as well, but apparently it isn't.
Actually I just read:

In Chrome, disabled buttons have all event listeners removed from them. Clicking, right clicking, selectstarting, etc. doesn't work on disabled buttons.

So my theory is that the input is actually bluring, but the event listener is disabled.
Anyway the pull request doesn't include a call to blur itself.

@oliviertassinari
Copy link
Member

I can confirm the behaviour https://jsfiddle.net/v23yf5yh/. looks good 👍

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! labels Jul 4, 2017
@oliviertassinari oliviertassinari changed the title [TextField] Fix to set unfocused when component becomes disabled [TextField] Fix unfocused state when disabled Jul 4, 2017
@oliviertassinari oliviertassinari merged commit 09c40cf into mui:master Jul 4, 2017
djbuckley added a commit to manchesergit/material-ui that referenced this pull request Jul 5, 2017
@djbuckley
Merge remote-tracking branch 'call_em_all_-_master/master'
2c26d14 
* call_em_all_-_master/master:
  [Docs] Add v0.18.6 to versions.json
  0.18.6
  [CHANGELOG] Extra information
  [CHANGELOG] Prepapre v0.18.6
  [TextField] Fix unfocused state when disabled (mui#7283)
  [DatePicker] Use pickerHeaderColor muiTheme property for DatePicker header customization (mui#7295)
  [ListItem] Apply paddingRight to automatic expand icon (mui#7313)
  [AutoComplete] Fix issue with popover positioning on iOS (mui#7333)
@amangeot amangeot mentioned this pull request Jul 10, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@xaviergonz @oliviertassinari