Material-ui: [buttons] "choose an image" does not open file dialog in firefox

[rkstar]

mac osx yosemite / firefox 39.0
demo page does not work either: http://material-ui.com/#/components/buttons

works fine in chrome and safari.

[Fer0x]

In Firefox input[type="file"] inside button doesn't work.
See example http://codepen.io/malyw/pen/xGPPvV

[flccrakers]

Hello everybody,
linux, ubuntu 11.04 / firefox 40.0
We still have this bug.
Any input in a button doesn't work, have no solution for now.
Someone have any idea to fix it ?

[Fer0x]

I'm just put input next to button and trigger click.

[flccrakers]

Thanks Ferox for the trick. I finally did the same.
But then a question, why do we need anymore the input ?

I guess it's to be able to still have the login and password saved, but not familiar with the process.

[shaurya947]

@rkstar @Fer0x anything show up in the console when you click the "Choose an image" button on the doc site?

[rkstar]

nothing shows in firebug console.
nothing shows in chrome inspector console either

[joeynguyen]

Edit:
Nevermind, totally forgot I could use type="submit" for a button component for my use case _facepalm_. Please forgive my brain fart. This is what happens when you code late at night.

---

I'm also having this issue with an input[type="submit"] on Chrome as well. It does seem to work but you have to click on a certain area of the button. You can't just click anywhere.

I think the solution to this problem is to create a separate component for inputs that are styled like buttons instead of having the input element inside a button element and hiding it with CSS which is what is happening here.

This solution is what the react-bootstrap project does:
Button: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js
ButtonInput: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/ButtonInput.js

[aahan96]

@joeynguyen, I am closing this issue for now. If you are still experiencing some trouble with MUI regarding this topic, you can comment below!

[imsun]

According to https://www.w3.org/TR/html-markup/input.file.html

• The interactive element input must not appear as a descendant of the a element.
• The interactive element input must not appear as a descendant of the button element.

An <input> tag shouldn't appear in a <button> tag, neither should the following tags:

• <a>
• <button>
• <filedset>
• <label>
• <select>
• <textarea>

That's why it doesn't work in Firefox. It's not a bug, maybe you should use <div> tag for buttons. @aahan96

[NeXTs]

Hey, so what you propose to do for firefox users?
"Choose An Image" doesn't work in Firefox even at demo page

[rabbit210]

I believe there is a better solution than wrap input[type=file] with <button> - use <label> instead. Here is a good article about this solution:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/