Input are not properly sized in some scenarios

[marcoancona]

I am experience a problem when the component is loaded with a provided value. Only the first digit of day, month, year, as well as time, is displayed (see image).

The input fields are then correctly resized either by changing the value prop, or by clicking on one of the fields.

[wojtekmaj]

Hmm, it looks like auto-expanding fields are not working correctly 🤔 Are you using default styling or you have decided to write your own ones?

[marcoancona]

I am using the default style (to be precise I load the .nostyle but the default CSS style is already loaded separately at that time). I am using this within a (https://v0.material-ui.com/#/components/popover)[Material-UI Popover]. Might this be the case? I don't see this problem in the example associated with the project. Also trying to debug this, I found that getBoundingClientRect().width in updateInputWidth() returns 0. I wonder if this method is called too early in the rendering pipeline.

[marcoancona]

Ok, I realized that if I use the <Popover animated={false}> the problem does not occur. My guess is that the first updateInputWidth() is called while the Popover component is transitioning (a scale transformation, I guess) and the span used as a reference has a width of zero.

I guess this is quite an edge case, so I can also find my own workaround if you are not interested in supporting this scenario.

[wojtekmaj]

I'm actually interested as this affects some other more common scenarios, like rendering input before a font is loaded. I just need a better solution than just measuring everything every .1 seconds :/

[Phamiliarize]

This is also occurs when date picker/datetime picker etc are put into a bootstrap collapse (specifically using reactstrap)

There is a fatal error causing pages to crash when the picker is clicked: Uncaught TypeError: Cannot read property 'clientHeight' of null

I think it perhaps is related to the difficulty with sizing?

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.