Outlined textfield notch is to small

[MatthiasF999]

The label does not fit in the notch of the outlined textfield.

import React, { useState } from 'react';
import TextField, { Input } from '@material/react-text-field';
import '@material/react-text-field/dist/text-field.css';

export default () => {
  const [text, setText] = useState('');

  return (
      <TextField
        outlined
        label='First Name'
      ><Input
        value={text}
        onChange={(e) => setText(e.currentTarget.value)} />
      </TextField> 
  )
}

[moog16]

@MatthiasF999 what version are you using? Also are you using this in a dialog?

[MatthiasF999]

I am using version 0.10.0.

This happens with and without a dialog.

I made an example here: https://repl.it/repls/ScarceLoneAdministration

[moog16]

Hmm really interesting...This will require some investigation. I'll try looking at this tomorrow.

[moog16]

@MatthiasF999 I just tried reproducing in create-react-app. Are you familiar with this? We have a getting started guide in our main readme. Could you try to do the same steps and see if you still see this result?

Once you get create react app setup, follow these steps:

create-react-app myApp
cd myApp
yarn add @material/react-text-field
yarn start

Then create a file src/TextField.js:

import React, {useState} from 'react';
import TextField, { Input } from '@material/react-text-field';
import '@material/react-text-field/dist/text-field.css';

export default () => {
  const [text, setText] = useState('');

  return (
    <div>
      <TextField
        outlined
        label='First Name'
      ><Input
        value={text}
        onChange={(e) => setText(e.currentTarget.value)} />
      </TextField> 
    </div>
  );
}

In App.js do:

import React, { Component } from 'react';
import './App.css';
import TextField from './TextField';

class App extends Component {
  render() {

    return (
      <TextField />
    );
  }
}

export default App;

A window to localhost:3000 should open and you should see something like this:

[moog16]

[MatthiasF999]

It now works. After a little research I found out, that this happens with react-scripts 2.1.5. A new version was released after the issue was created, which resolves this issue.

[moog16]

So you're saying that the text-field is incompatible with react-scripts 2.1.5?

[MatthiasF999]

Exactly. I do not have this problem with the new version and if I update the react-scripts in the project where the problem occurs, the issue is gone. If I downgrade the react-scripts to 2.1.5 in the project I created today, the issue is back.

[moog16]

So something must have fixed it in v2.1.6 https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#216-march-6-2019.

However what is the site you linked to using to build those assets? https://repl.it/repls/ScarceLoneAdministration

[MatthiasF999]

Repl.it is an online IDE. Since I was not able to import the component in JSFiddle or Codepen, I used repl.it, since it allows to import npm packages.

[moog16]

Confirmed. I just tried react-scripts: 2.1.5: broken like your screenshot 2.1.6: did not compile 2.1.7: worked

I'm not sure what it is, but I will continue to investigate. This is a lower priority issue though since it sounds like you can work around it.