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

[SelectField] [TimePicker] [DatePicker] no focusing #4246

Closed
SPAHI4 opened this issue May 12, 2016 · 12 comments
Closed

[SelectField] [TimePicker] [DatePicker] no focusing #4246

SPAHI4 opened this issue May 12, 2016 · 12 comments
Labels
component: date picker This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module! component: time picker This is the name of the generic UI component, not the React module!

Comments

@SPAHI4
Copy link

SPAHI4 commented May 12, 2016

Problem description

All of these components are not focused by clicking on the floating label

Steps to reproduce

click on floating label on empty field

Versions

  • Material-UI: all
  • React: all
  • Browser: all
@tintin1343 tintin1343 added the duplicate This issue or pull request already exists label May 12, 2016
@tintin1343
Copy link
Contributor

#3402

#156

These are related issue which discuss focussing as well. Closing this.

@SPAHI4
Copy link
Author

SPAHI4 commented May 12, 2016

@tintin1343 I dont think these issues are related
myimage

@tintin1343 tintin1343 reopened this May 12, 2016
@tintin1343
Copy link
Contributor

@SPAHI4 : Alright, I noticed the selectField issue. You need to click close to the dropdown arrow unlike a Textfield. But whats wrong with date and TimePicker? They work just fine.

Also, a side note : It is always helpful when you post screen grabs to explain the issue.

@tintin1343 tintin1343 removed the duplicate This issue or pull request already exists label May 12, 2016
@SPAHI4
Copy link
Author

SPAHI4 commented May 12, 2016

@tintin1343 same issue. Picker dialog does not opens when i click on floating label

@mpolichette
Copy link

This issue happens when you have a Date or Time Picker with a floating label like such:

<DatePicker
  floatingLabelText="Event Date"
  fullWidth
  {...date}
/>

@jampy
Copy link

jampy commented May 31, 2016

I'm having the same problem. The floatingLabelText prevents Date, Time and Select inputs from dropping down. Clicking somewhere outside the text works fine.

Removing the z-index property from the <label> style doesn't seem to have any visual effect, but makes the component work properly.

image

This is with material-ui 0.15.0 using formsy-material-ui

Recording that shows that clicks on floatingLabelText have no effect, except for simple text fields:

animation

@jampy
Copy link

jampy commented May 31, 2016

Note that the TimePicker demo does not suffer from this problem, but also uses a <div> instead of a <label> (different material-ui version?):

image

@SPAHI4
Copy link
Author

SPAHI4 commented May 31, 2016

@jampy it uses hintText property instead of floatingLabelText

@bigblind
Copy link

Make sure you're injecting react-tap-event-plugin as described in the installation guide. This turned out to be the problem for me.

@mbrookes
Copy link
Member

mbrookes commented Jun 19, 2016

Dupe, and already fixed in #4418.

@bigblind
Copy link

I understand you don't have a fixed release schedule, but can you gie me a rough timeframe for when 0.15.1 will be released? If it'll be released relatively soon (within a month or so), I'm willing to directly depend on a github commit somewhere after this change went in, and then go back to the stable version as a dependency when the version is released. If it'll take longer, I'd look for an intermediate solution.

@mbrookes
Copy link
Member

If it'll be released relatively soon (within a month or so)

More likely within a day or so. 😄 #4506

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 21, 2022
@zannager zannager added component: date picker This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module! component: time picker This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: date picker This is the name of the generic UI component, not the React module! component: select This is the name of the generic UI component, not the React module! component: time picker This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

8 participants