search

JedWatson / react-input-autosize

Auto-resizing input field for React
https://jedwatson.github.io/react-input-autosize
MIT License
769 stars 178 forks source link

Bug with changing font-family/font-size #114

Closed AndreyMiloserdov closed 6 years ago

AndreyMiloserdov commented 7 years ago

If you are created styles for input, and change it on fly, your sizer not update styles, so, where are no correct autoresize on change font size or family or others...

this.sizer node has only the initial props and not updates on input props updated.

hack to temporary solve this problem in code: this.view.input.copyInputStyles(); this.view.input.updateInputWidth();

JedWatson commented 6 years ago

You're right, I've added this gotcha with workarounds to the readme.

cancan101 commented 5 years ago

I think this is a different issue than this ticket but when / if the "Rendered Font" used for the container changes, the size will also change but not trigger a re-calculation of the needed width. Something like this might be needed: https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded

intelligence commented 5 years ago

@cancan101 Also seeing this issue. Once the web font is rendered the placeholder will be slightly cut off as it's slightly wider than initial paint font.

Any idea for a quick fix?

cancan101 commented 5 years ago

I subscribed to the font loaded event and then called a repaint on the auto size component.

intelligence commented 5 years ago

That's great! How does one call a repaint? New to React – would be thankful for an example :)

duongthienlee commented 5 years ago

How do I call copyInputStyles()? I'm using react hooks now, can't use ref on AutosizeInput to call that function at all. I know I can set a key to trigger rerender, but how to call copyInputStyles () if I don't want to use key.