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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Down arrow in NativeSelect OutlinedInput is not clickable #16136

Closed
2 tasks done
Rennzie opened this issue Jun 10, 2019 · 1 comment 路 Fixed by #16137
Closed
2 tasks done

Down arrow in NativeSelect OutlinedInput is not clickable #16136

Rennzie opened this issue Jun 10, 2019 · 1 comment 路 Fixed by #16137
Labels
bug 馃悰 Something doesn't work component: select This is the name of the generic UI component, not the React module!

Comments

@Rennzie
Copy link

Rennzie commented Jun 10, 2019

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 馃

The down arrow in the Select Input should open the select when clicked

Current Behavior 馃槸

You have to click the input area of the Select to open it rather than the down arrow.

Steps to Reproduce 馃暪

Link:

  1. https://codesandbox.io/s/material-ui-native-select-bug-0rohd

Context 馃敠

Just a general use of Selects in various forms. I might be mistaken but I would expect the drop down arrow to open the select.

Your Environment 馃寧

Tech Version
Material-UI v4.1.0
React 16.8
Browser Chrome
TypeScript 3.4
etc.
@aditya1906 aditya1906 mentioned this issue Jun 10, 2019
Merged
1 task
@oliviertassinari oliviertassinari added bug 馃悰 Something doesn't work component: select This is the name of the generic UI component, not the React module! labels Jun 11, 2019
@oliviertassinari
Copy link
Member

@Rennzie This is not the first time I see this problem. There is a specificity issue between the OutlinedInput and NativeSelect components, it's probably an architectural issue. They both try to set the padding-right property on the native select element.

eps1lon pushed a commit that referenced this issue Jun 13, 2019
@aditya1906 @eps1lon
[Select] Fix specificity issue (#16137)
a52834b 
* [core] Fix width of select in NativeSelect.js

Fix for #16136
The style for select is overwritten by the Outlined style. This should solve the issue.

* Change order of style in NativeSelect.js

* try something

* minimize changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 馃悰 Something doesn't work component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Select] Fix specificity issue
2 participants
@oliviertassinari @Rennzie