Material-ui: [TextField] wrong color on focused border

[vuhrmeister]

Problem description

It's a weird issue. The border of a TextField has the color black (see Screenshot):

Checking the CSS in the developer console:

So obviously there is no color set on the border.

This happens in Chrome, but in Firefox it works. But it get even more weird: When I build my app with the flag NODE_ENV=production then it DOES work properly.

Also changing these two lines of code here: https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldUnderline.js#L94-L95

… to borderBottom: 'solid 2px ' + focusColor, work as well, even with a normal build.

I wanted to create a Webpackbin example, but there it works fine.

I'm using Meteor, don't know if that matters. But maybe someone find a solution.

Versions

• Material-UI: 0.16.4
• React: 15.4.1
• Browser: Chrome 54

[lewisdiamond]

See this minimal setup showing the problem:
bad zip file... github doesn't allow .tgz
Just use CRA and put a TextField in a minimal project.

[elTallarin]

This is happening to me too. No matter which theme you use, textfield underline is always black.
Also, this is happening in chrome, and it's working fine in firefox.

# Versions:

• React: 15.4.1
• Chrome: 55.0.2883.75
• Material-UI: 0.16.0 to 0.16.4 (those are the versions I tested)

[vuhrmeister]

@lewisdiamond It seems your zip isn't complete. public and src folders are empty.

[oliviertassinari]

I think that it's a duplicate of #5697. Could you confirmed that it's solved on the master branch?

[vuhrmeister]

Oh, I didn't see that bug you linked although I actually tried to find that issue before opening a new one …
Anyway, it seems to work with current master (if I did everything right).

[lucasbento]

@vuhrmeister: great. I'll close this issue since it appears to be resolved, thank you for openning it!

[oliviertassinari]

That's quite an important issue. Let's release something before the end of the week.

[rsolomon]

Any insight into what caused this issue? I didn't even update any libraries, just did a clean install.

[lucasbento]

@rsolomon: it's probably the ^ (caret) on your Material-UI dependency in package.json, npm treats that as a _update to most recent major version_, so if you have a package with ^1.2.3 and it releases a 1.2.4, npm will automatically install it.

[petermikitsh]

I'm still seeing this on 0.16.6 :(

Not sure what I need to change.

[petermikitsh]

It appears border-color is set to initial, causing the issue.

[petermikitsh]

@oliviertassinari This is still broken if you set {userAgent: 'all'} in a call to getMuiTheme, e.g., getMuiTheme({...}, {userAgent: 'all'});.

New issue created here: https://github.com/callemall/material-ui/issues/5902

[luokuning]

@elTallarin I have the same issue as you, and only in Chrome when develop with webpack using HotModuleReplacement Plugin, have you found solution?

[ryanbelke]

posting for same error, using webpack HMR, userAgent all and chrome