Material-ui: SelectField/DropDownMenu not working

[solchea]

Having an odd problem where the SelectField isn't working - it renders, but isn't clickable. Other form fields work just fine. No events for the DropDownMenu seem to be firing. Anyone else have this problem or know what could be causing this? I've run the examples and they work fine locally, so the only difference I know of is my build process but I can't imagine that would be causing this problem. And here's the code I'm using:

<SelectField floatingLabelText="Your Department" menuItems={departments} />
<DropDownMenu menuItems={departments} />

[tylermichael]

Try putting this in your build:

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Make sure that function is ran before you render anything to page.

[solchea]

Thanks for the suggestion, I had the injectTapEventPlugin() firing on page load and just checked and it's definitely firing before I try to render the components, but it's still not working. This is how it's rendering, not sure if it helps diagnose what's going on.

[tylermichael]

Are these drop downs coming up when you click them?

For the SelectField, do you have a value prop and an onChange handler?
See here for an example: https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/text-fields.jsx#L332-L337

[solchea]

Nope, drop-downs do not show up on click. I've tried attaching an onClick handler on the component itself and it still doesn't work. If I wrap the component with a div and put an onClick on the div, the event triggers just fine. And yes, I do have a value prop and onChange handler and it still isn't working.

[hai-cea]

@solchea Are you getting any errors in the console?

[zachguo]

I can confirm, dropdown is showing up for me but floatingLabelText is jammed with input like @solchea's picture above. hintText also has no effect.

[zachguo]

I fix my problem by passing a value={undefined} to SelectField.
edit:
But after I select an option, contents become jammed again when not focused.
edit:
Everything works fine if value is assigned an integer value.

[williamakehurst]

I'm having the same problem in my project with both SelectFields and DropDownMenu. They render, and on render flash the option values, then the are not selectable at all. @solchea Did you find a solution?

[bdefore]

Same here. Clicking doesn't open the dropdown.

[simtechmedia]

Also not working for me when compiled into my project

[levbrie]

importing injectTapEventPlugin worked for me:

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

but I have to say, the amount of setup required in order to do anything of use with material-ui is pretty burdensome. Things that are required in order for a component to work should come with that component automatically. material-ui requires some pretty elaborate rituals, especially if you're using es6 syntax.

[bdefore]

forgot to follow up but just the requiring of injecttapevent worked for me
too at least enough to get the drop down opening. but the lack of
consistence with other components led me back to using text field for what
we needed. curious to see what the rewrite of drop down does.

On Friday, September 18, 2015, Lev Brie [email protected] wrote:

importing injectTapEventPlugin worked for me:

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

but I have to say, the amount of setup required in order to do anything of
use with material-ui is pretty burdensome. Things that are required in
order for a component to work should come with that component
automatically. material-ui requires some pretty elaborate rituals,
especially if you're using es6 syntax.

—
Reply to this email directly or view it on GitHub
https://github.com/callemall/material-ui/issues/1011#issuecomment-141513902
.

[MikeB2012]

This worked: var injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin();
The challenge then became that the first item in the selection list was rendered over the 'hint' text. My solution was to just have a blank item at the top of drop down items ie.[ {payload:'', text ''}, ...]

[bendiy]

Related:
https://github.com/callemall/material-ui/issues/1427
https://github.com/callemall/material-ui/issues/1195
https://github.com/callemall/material-ui/issues/2183

[bendiy]

I'm having this same problem after upgrading to 0.13.3 from 0.13.0 on a DatePicker. If I have a floatingLabelText set for the DatePicker, the date picker dialog window will not pup up unless I click outside of the label text value. Clicking directly on the floatingLabelText does not bring up the date picker dialog. Clicking to the right of it or below it does bring up the date modal.

[dangerismycat]

I'm having this problem as well, with both floating text (large, gray, overlapping) and being unclickable. injectTapEventPlugin helps, but doesn't fully solve: on initial render, the floating text problem remains. But the SelectField is clickable, and upon selecting an option, the floating text renders correctly. (If you click but don't select an option, the render remains incorrect.)

[MarkLeMerise]

I still cannot get a <SelectField> or <DropdownField> to display on click, and have pretty much exhausted every solution in this thread:

1. injectTapEventPlugin() as high up in my script as possible, before rendering (@tylermichael)
2. Wrapping the component with <div onClick={}> (@solchea)
3. Setting value to undefined (@zachguo)
4. Adding an "empty" option (@MikeB2012)

For sanity, when setting the openImmediately to true, I saw the dropdown with the options populated, so I know the data structure is being read correctly, but I couldn't select any of the options.

For reference, I tried this with [email protected] and [email protected], and a few other combinations with earlier React versions down to 0.14.0, as well as [email protected] (tested on Chrome Canary, vanilla Chrome, and Firefox). Still looking for the winning combination :confused:

[alitaheri]

@MarkLeMerise Can you try with the latest master branch? SelectField and DropDownMenu now use Popover. maybe that fixes it?

[gravitypersists]

I'm seeing this with React 14 as well. Specifically, the label text is coming down over the option text.

0.14.0-rc2

[bdefore]

@gravitypersists are you setting value, per the idea of being a controlled component?

[gravitypersists]

Ah. I hadn't gotten to that part yet, I just assumed it was broken. I would still consider this an issue, though, as all other controlled components work fine without the value set.

I also needed to prepend a blank menuItem to avoid overlap on first render.

Finally, I don't understand why the docs don't include the two most important pieces of information: the format the component expect menuItems in and the format of the value. http://www.material-ui.com/#/components/select-fields

Is this by, somewhat flawed, design? Or is it just missing? I don't mind submitting a PR clearing it up, it just seems too obvious to go missing in documentation...

[bendiy]

Same issue here:
https://github.com/callemall/material-ui/issues/1427#issuecomment-165249532

[oliviertassinari]

@gravitypersists The docs was missing a lot of information... This should be fixed with https://github.com/callemall/material-ui/pull/2565.

[scarletsky]

@oliviertassinari After upgrading to 0.14.0, I get lots of error when using SelectField. I think the deprecated information should be a warning, not an error.

[alitaheri]

@scarletsky It IS a warning, only in form of an error to contain the stack trace. it won't halt execution. it's just red.

[scarletsky]

@alitaheri Oh, I see... What I want is to follow the warning, use composability instead of menuItems. But I've check the docs, I can not get any useful info to migrate, because the SelectField section still use menuItems...

[alitaheri]

@scarletsky Yes SelectField is still old. I'm working on it to migrate. the 0.14.1 will be brand new :grin:
For now just follow the docs on DropDownMenu it's the exact same usage. compose them like that. sorry for the inconvenience, I'm working on it ^_^

[scarletsky]

@alitaheri OK, thanks for the information. Hoping 0.14.1 release ! :smiley:

[maxkrieger]

:+1: making value an int works

[Eyesonly88]

For people that use redux-devtools + hot reloading, I had to injectTapEventPlugin() _everytime_ the app is rendered (when the store state changes) otherwise it won't work after the initial load. Thought I'd add it here in case other people hit this problem.

[oliviertassinari]

@Eyesonly88 That's not convenient. Can we do something about it?

[Eyesonly88]

@oliviertassinari I'm not quite sure as I don't know why injectTapEventPlugin is needed in the first place. My app is relatively small so I'm not seeing any performance hit from doing this workaround but it is definitely not ideal.

[alendit]

For what it's worth: there is a bug in react-tap-event-plugin which prevents tap events from working when a parent element stops event propagation on bubbling. See https://github.com/zilverline/react-tap-event-plugin/issues/54 for more precise description and a working example.

Since material-ui only listens on touchTap , many element stop working when onTapEvent isn't fired.

[jbq]

I'm affected by this bug and spent several hours trying to figure out what was going wrong. May I suggest to issue a warning in the console when a dependency such as the tap event plugin is not met?

[oliviertassinari]

spent several hours trying to figure out what was going wrong

You can't imagine how many hours were spent on this bug :/. That's a very good idea. I'm gonna try. I'm tired of the noise it's adding to our issue reporting tool.

[austinmao]

+1 I am seeing this issue. In rare instances, the SelectField dropdown works when I refresh. I am not sure why. I have also tried these:

1. injectTapEventPlugin() as high up in my script as possible, before rendering (@tylermichael)
2. Setting value to undefined (@zachguo)
3. Adding an "empty" option (@MikeB2012)

[dczii]

I got the same issue as @austinmao any solutions?

[dczii]

solved this by adding these codes before any imports. I suggest put it in the 1st line of app.js

const injectTouchTapEvent = require('react-tap-event-plugin');
injectTouchTapEvent();

[oliviertassinari]

I think that we can close this issue now.

[mbrookes]

Agree.

[JuoCode]

@alitaheri Use the latest 0.15.0-beta.2 still not work :(

[coocssweb]

@mbrookes this issue still existence at the version 0.14.4 . I still cannot get a to display on click。
no getting any errors in the console！how can i fix it?

Edit

I fixed it , by :
npm install react-tap-event-plugin^0.2.0

and add

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

in my components。

thank you。.....

[mobimation]

I assume the injectTapEventPlugin() call is a bug workaround ?

[frankdavidcorona]

Work for me using react-tap-event-plugin

[lojones]

same issue for me and this workaround

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

worked for me, but can someone explain why this works?

[negarineh]

Maybe useful 'keepMounted' property on Material UI Select component not mounting menu items to DOM