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.

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

[TextField] variant="outlined" line through Label when used inside (first hidden) (eg. div) container #16885

Closed
2 tasks done
cathiele opened this issue Aug 4, 2019 · 1 comment
Labels
duplicate This issue or pull request already exists

Comments

@cathiele
Copy link

cathiele commented Aug 4, 2019

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When a TextField with variant="outlined" is child of a firstly hidden component (hidden=true) (e.g. div) and then displayed after the container is set to hidden=false, the Label of the TextField shows the line in the background of the label text

Expected Behavior 🤔

the line should not show up behind the label when the container with the TextField becomes visible

Steps to Reproduce 🕹

https://codesandbox.io/embed/material-ui-textfield-bug-qrgyc

import React, { useState } from "react";
import { Button, TextField } from "@material-ui/core";

function App() {
  const [formValues, setFormValues] = useState({
    text1: "text1",
    text2: "text2"
  });
  const [isTextField2Hidden, setTextField2Hidden] = useState(true);

  const handleChange = name => event => {
    setFormValues({ ...formValues, [name]: event.target.value });
  };

  const handleClick = event => {
    setTextField2Hidden(false);
  };

  return (
    <div>
      <Button onClick={handleClick}>show TextField</Button>
      <div>
        <TextField
          label="Text 1"
          value={formValues.text1}
          onChange={handleChange("text1")}
          margin="normal"
          variant="outlined"
        />
      </div>
      <div hidden={isTextField2Hidden}>
        <TextField
          label="Text 2"
          value={formValues.text2}
          onChange={handleChange("text2")}
          margin="normal"
          variant="outlined"
        />
      </div>
    </div>
  );
}

export default App;

Steps:

  1. open the linked CodeSandbox
  2. TextField1 should be rendered correctly
  3. Click on "SHOW TEXTFIELD"
  4. the rendered TextField shows line behind Label Text

Context 🔦

Your Environment 🌎

Tech Version
Material-UI v4.3.1
React 16.8.6
Browser Chrome (macOS, Android), Safari (macOS
@cathiele cathiele changed the title [TextField] variant="outlined" line through Label when used inside (first hidden) (Typography) container [TextField] variant="outlined" line through Label when used inside (first hidden) (eg. div) container Aug 4, 2019
@oliviertassinari oliviertassinari added the duplicate This issue or pull request already exists label Aug 5, 2019
@oliviertassinari
Copy link
Member

It's a duplicate of #14530

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants