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.

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

[TextField] Fix for floating label element not allowing focus #2228

Merged
merged 1 commit into from
Nov 21, 2015

Conversation

pandaiolo
Copy link
Contributor

This is a regression bug from #2078. The floating label was set with a zIndex of 1, which moves it on top of the input element. The click events on the floating label do not reach input element, hence not allowing focus.

Also, the cursor became an arrow instead of text, because the floating label div is on top, which is an unexpected visual feedback on a text field.

OSX El Capitan, Chrome Version 46.0.2490.86 (64-bit)

@@ -309,7 +310,8 @@ const TextField = React.createClass({
let floatingLabelTextElement = floatingLabelText ? (
<label
style={this.prepareStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
htmlFor={inputId}>
htmlFor={inputId}
onClick={this.focus}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it should be onTouchTap={ instead.

@oliviertassinari
Copy link
Member

@pandaiolo It's working fine for me with this fix 👍. Could you squash down the commit? I will merge then.

@pandaiolo
Copy link
Contributor Author

Squashed!

@oliviertassinari
Copy link
Member

@pandaiolo Thanks! (The CI fail has nothing to do with this PR)

oliviertassinari added a commit that referenced this pull request Nov 21, 2015
[TextField] Fix for floating label element not allowing focus
@oliviertassinari oliviertassinari merged commit b861e64 into mui:master Nov 21, 2015
@zannager zannager added the component: text field This is the name of the generic UI component, not the React module! label Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants