React-date-picker: Failed to execute 'check' on 'FontFaceSet': Could not resolve '' as a font.

[jaydattc]

document.fonts.check() gives of an error for controlled component when value is empty

<DatePicker
    value={date} // date=""
    clearIcon={null}
    onChange={x => handleChange({ target: { name: "date", value: x } })}
/>;

[elangloi]

Just found this, looks like the same issue https://github.com/wojtekmaj/update-input-width/issues/5

[wojtekmaj]

Fixed in 1bfbecff20c6621186b7c220870acd743384330c but not released yet. Will release soon.

[wojtekmaj]

Check v7.8.2!

[david-kimpel]

Hey there, I'm using v7.8.2 but this issue does not seem to be resolved. In our project it seems it throws an error even when the value is not empty.

[ChrisBolman]

seeing the same issue as @david-kimpel in our project, also 7.8.2

[DHDaniel]

we're seeing this error:

3.bundle.js:8 Uncaught (in promise) DOMException: Failed to execute 'check' on 'FontFaceSet': Could not resolve 'normal tabular-nums 400 14px / 21px "Helvetica Neue", Helvetica, Arial, sans-serif' as a font.

It seems to be related to the tabular-nums property. Uncommenting it in our styles fixed the problem.

[david-kimpel]

It seems to be related to the tabular-nums property. Uncommenting it in our styles fixed the problem.

This could be it, in our project it throws the error on the tabular-nums property aswell.

Also the error doesn't get thrown when we import the no-style version of the component along with manually importing the required css/less files.

[geoffmiller]

This still an issue in 7.9.0. You can trace it back to https://github.com/wojtekmaj/react-date-picker/blob/master/src/DateInput/Input.jsx#L27

If you remove tabular-nums from

const isFontLoaded = document.fonts.check(font.replace('tabular-nums', ''));

It will work.

I have done some testing with document.fonts.check() and I can't get any variation working with tabluar-nums in the the font string passed in. I am not sure how the fonts method wants it formatted.

[wojtekmaj]

Interesting. Looks like tabular-nums can't be used in CSS font shorthand.

document.fonts.check('normal small-caps 400 14px / 21px "Helvetica Neue", Helvetica, Arial, sans-serif')
works like a charm, but
document.fonts.check('normal tabular-nums 400 14px / 21px "Helvetica Neue", Helvetica, Arial, sans-serif')
does not.

Even more so, window.getComputedStyle(el).font no longer returns string value on Chrome if el is given font-variant-numeric: tabular-nums :O

[geoffmiller]

Very interesting that small-caps works but tabular-nums does not.

Im not sure who/where to report this bug to. Is it a browser/chrome bug? Is this the intended behavior?

P. S. Excellent library and thanks for all your hard work!

[wojtekmaj]

Looks like normal and small-caps are the only allowed values of font-variant in CSS font shorthand property. So, there's no way to apply font-variant-numeric: tabular-nums on canvas to measure the text. I fixed this issue in update-input-width library in https://github.com/wojtekmaj/update-input-width/commit/ce128a5498e277f9baed8d52dd3d65f71be899ee.