[OutlinedInput] Label width is being calculated before fonts are loaded

[rofazayn]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

What should happen is the following

Current Behavior 😯

But instead I get this

Notice that the TextField's outline is slightly overlaping the label.

This only happens when the page loads for the first time (Or after a hard refresh), and whenever a react re-render occurs, the problem is gone.

I also noticed that this problem happened when I changed the default font, and I think it has something to do with FOUT (Flash of unstyled text).

Is it possible that Mui calculates the label's gap width on the outline based on the font that loads first, before the new font style gets applied

PS: When I write something with Roboto font, then I change the font family to something else (in this case Tajawal) and give them the same font size, I notice that the same sentence I typed with Tajawal is a bit wider than the one with Roboto.

Can anyone help me solve this issue, and is there a way to load font styles before React manifests into the root element?

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	All

[oliviertassinari]

We have a similar issue with the Tabs component: #7187. I'm not aware of any better solution than the ones we have explored in the tab linked issue. To sum-up:

1. The action path: we could expose an action prop to ask for the component to update its position, synchronize the outline gap with it. It's an approach already deployed with a few other components.
2. The font wait loading path: mount the React text field once the font is loaded (fontfaceobserver or webfontloader).
3. In the future, we should consider using the ResizeObserver API for out of the box support:
   • https://caniuse.com/#feat=resizeobserver (not supported everywhere yet)
   • https://github.com/que-etc/resize-observer-polyfill (bundle size overhead implication)

[rofazayn]

I dug into FontFaceObserver, and I found a solution

I loaded the font first and returned a promise that resolves when the font is loaded then renders the page

[stevenberdak]

If you want a very simple solution to handle this and don't mind using experimental technology that is currently supported by most browsers here is an example...

constructor(props) {
    super(props);
    this.state={
        fontsLoaded: false,
    }
}

componentDidMount() {
    if (document.fonts) {
        document.fonts.ready
        .then(() => {
            this.setFontsLoaded(true)
        })
    }
}

setFontsLoaded(complete) {
    this.setState({fontsLoaded: complete})
}

render() {
    return(
        ...
        {this.state.fontsLoaded && renderView()}
        ...
    )
}

[rofazayn]

Thank you @stevenberdak, I ll try it as soon as possible, if you are interested on knowing how I got it to work, here is how:

• First you install FontFaceObserver and import it into your file..
• Then create an observer appFont = new FontFaceObserver('NAME_OF_FONT')
• Then you return a promise that renders your app when it resolves (In this case when font is loaded)

import FontFaceObserver from 'fontfaceobserver';

const appFont = new FontFaceObserver('NAME_OF_FONT');

appFont.load().then(() => {
 ReactDOM.render(rootElement, document.getElementById('root'))
})

Note that rootElement is a variable wrapping my <App /> and any other components.

[oliviertassinari]

We have explored a solution in #17680 that only relies on CSS to position the label. This should solve the problem.

[sebascomeau]

My solution with version 5.

    /* start: change outline fiels label text size */
    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&$shrink': {
            transform: 'translate(14px, -6px) scale(0.9)',
          },
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          '& > legend': {
            fontSize: ' 0.9em',
          },
        },
      },
    },
    /* end: change outline fiels label text size */

[pailas]

Thank you @sebascomeau, your solution for v5 worked for me.

[slim-hmidi]

I'm facing this issue when I update the font-size and font-weight and using Futura-Bt medium fonts.
If the label contains a single or small word it is displayed correctly. But if it is composed label of 2 or more words, there is no space between the border and the label.
I tried to add the some padding for the legend label but it does not work. The legend width should fit the label input width in order to add the padding and does not add extra space at the end of the word.
How can I fix this issue with customized font-size?

[slim-hmidi]

I tried to set the width for the legend when I changed the font-family and font-size using this:

width: `${label.trim().length * 8 * 0.75}px `

But I'm not sure that the width is calculated correctly.
Is there any util function that fits the different font-family and sizes?