Material-ui: [EnhancedButton] Should not apply type="button" when not rendering a <button> element

Created on 15 Apr 2016 · 15Comments · Source: mui-org/material-ui

Problem Description

to reproduce error, update normalize.css from 3.0.3 to "4.1.1". See image below. You'll notice that ListItems inside a LeftNav/Drawer look strange.

https://www.dropbox.com/s/nv1lxfac7fiamfy/Screenshot%202016-04-15%2014.03.43.png?dl=0

Versions

Material-UI: 0.15.0-beta.1
React:15.0.1
Browser: Chrome 50.0.2661.75 (64-bit)

bug 🐛

Source

alexhawkins

👍27

Most helpful comment

@jokeyrhyme it worked for me too but if you use linkButton on a button, it doesn't work. You also need to add a[type=button]

span[type=button] {
  appearance: none;
}
a[type=button] {
  appearance: none;
}

rafaelugolini on 4 Jul 2016

👍11

All 15 comments

It seems to happen with materialize-css version 4.0.0 too

FerdinandvHagen on 16 Apr 2016

it's all because of this:

"material-ui": "^0.15.0-beta.1"
https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css
Chrome Version 50.0.2661.75 (64-bit)

liesislukas on 21 Apr 2016

This is because the links in that list are span elements -- which is totally incorrect.

nathanmarks on 21 Apr 2016

I think https://github.com/callemall/material-ui/pull/3953 might fix this in the docs -- not the core issue though

nathanmarks on 21 Apr 2016

Is there a workaround on this? It is still a problem when using material-ui v0.15.0 with normalize 4.x. Between IE11/Firefox/Chrome, only Chrome has this problem, so is this actually a bug that should be lodged with normalize?

ngbrown on 20 May 2016

In necolas/normalize.css#554, this exact issue was brought up and their position is:

The usage of <span type="button"> is not valid HTML.

My workaround for now is <ListItem ... style={{"-webkit-appearance": "none"}} />

I guess there's a couple options:

remove default of type: 'button' from EnhancedButton's defaultProps, but we want other button types such as reset and submit.
adding "-webkit-appearance": "none" to the default styles.

What breaks when EnhancedButton uses <button> or <input> instead of <span> as its basis?

ngbrown on 20 May 2016

👍4

Adding {"-webkit-appearance": "none"} results in warning, instead we can use { WebkitAppearance: "none" }.

anwarjaved on 22 May 2016

👍5

It feels dodgy, but I've just got a workaround in my global CSS (using autoprefixer):

span[type=button] {
  appearance: none;
}

Doesn't seem to have broken anything (yet). :)

jokeyrhyme on 1 Jun 2016

👍5

This helps me:

span[type=button]
  appearance: none
  -webkit-appearance: none

v-komarov-parc on 23 Jun 2016

@jokeyrhyme it worked for me too but if you use linkButton on a button, it doesn't work. You also need to add a[type=button]

span[type=button] {
  appearance: none;
}
a[type=button] {
  appearance: none;
}

rafaelugolini on 4 Jul 2016

👍11

Just spent a good 30 minutes trying to figure it out. Can we have an official fix for this? It is really annoying.

yagudaev on 27 Sep 2016

👍3

+1, chased this bug for an hour. Does anything break if we remove type="button"?

Oduig on 4 Nov 2016

👍2

any update?

this bug also appear when using Normalize 5.0.0 😭

mantap123 on 30 Nov 2016

👍3

I'm using Eric Meyer's reset and it works fine. normalize or sanitize no good. 😭
http://meyerweb.com/eric/tools/css/reset/

caoer on 1 Dec 2016

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.