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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextField] Required TextField has a red border in Firefox #7887

Closed
chamun opened this issue Aug 23, 2017 · 6 comments
Closed

[TextField] Required TextField has a red border in Firefox #7887

chamun opened this issue Aug 23, 2017 · 6 comments
Labels
component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@chamun
Copy link

chamun commented Aug 23, 2017

Problem description

Firefox adds a red border to an input that is required even before the user has interacted with it:

screen shot 2017-08-23 at 17 24 22

<html>
  <body>
    <input type="text" placeholder="required text input" required />
  </body>
</html>

The issue is inherited by <TextField />:

screen shot 2017-08-23 at 17 29 20

import React from 'react';
import { MuiThemeProvider, TextField } from 'material-ui';

class App extends React.Component {
  render() {

    return (
      <div>
        <MuiThemeProvider>
          <TextField placeholder="Required TextField" required />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;

I can get rid of this border by adding the box-shadow:none property to an input:invalid selector.

Example:

import React from 'react';
import { MuiThemeProvider, TextField } from 'material-ui';

class App extends React.Component {
  render() {

    return (
      <div style={{margin: 30}}>
        <style>
          { "input:invalid { box-shadow:none; }" }
        </style>
        <MuiThemeProvider>
          <TextField placeholder="Required TextField" required />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;

Is this something that can be incorporated to Material-UI?

Versions

  • Material-UI: 0.19.0
  • React: 15.6.1
  • Browser: Firefox; Tested with versions 54.0.1 and 55.0.2
@oliviertassinari
Copy link
Member

@chamun Are you able to reproduce the same issue on the v1-beta branch?

@oliviertassinari oliviertassinari added the component: text field This is the name of the generic UI component, not the React module! label Aug 23, 2017
@sebald
Copy link
Member

sebald commented Aug 24, 2017 •
edited
Loading

I guess this falls under the "it's a feature, not a bug" category. FF (and also other browsers) have custom error displays. You can turn those off by

(1) Adding a novalidate attribute to your <form>
(2) Overwriting the browsers default CSS:

input:invalid {
    box-shadow:none;
}

/*
 * It's also possible to overwrite the styles for certain validation rules.
 */
input:required {
    box-shadow:none;
}

Note that you should always put your user inputs in a <from>. Some browser will have a strange behavior otherwise.

EDIT: BTW, I can reproduce the describe behavior on the documentation pages by just changing the HTML via dev tools.

@chamun
Copy link
Author

chamun commented Aug 24, 2017

@oliviertassinari

I don't know how to test it using the the v1-beta branch, if you provide or point me to instructions I can give it a shot.

Anyways, I tested with version 1.0.0-beta.6 and could not reproduce the issue. I installed it using yarn add material-ui@next.

@chamun
Copy link
Author

chamun commented Aug 24, 2017

@sebald

I get your point, but since this project intends to implement the Material Design specification, as a user I would expect it to overwrite any browser style that gets in the way of what the specification defines.

@sebald
Copy link
Member

sebald commented Aug 24, 2017

@chamun second that, was just suggesting a temporary fix, if needed :)

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 25, 2017 •
edited
Loading

Reproduction with v1-beta:

aout-25-2017 09-42-49

I have been benchmarking what other do. So I think that we should move @sebald workaround in the core of the library:

  • Apply the required attribute on the <input /> when the property is true
  • Show an example in the documentation with form novalidate
  • Overwriting the browsers default CSS

What do you think?

@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Aug 25, 2017
@oliviertassinari oliviertassinari mentioned this issue Aug 29, 2017
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@chamun @sebald @oliviertassinari