i-like-robots/react-tags

Autoresize causes input to jump around

jtojnar opened this issue · 3 comments

jtojnar commented

Current behaviour

When the placeholder does not fit on first line, it is placed on another one. But when one starts typing, the input will shrink, which might make it fit on the first line again.

Expected behaviour

The input should not shrink to be shorter than placeholder.

Steps to Reproduce

Steps to reproduce the problem:

  1. Add tags until placeholder would not fit.
  2. Type.

Example

Can reproduce it on the demo too.

Screenshots

tags-jumping.mp4

Your environment

  • OS: NixOS
  • Browser: Firefox 96.0.1, Chromium too.
  • Version of the component: 6.3.0
  • React version: 17.0.2
i-like-robots commented

This is now the default behaviour in the next major version of this component

i-like-robots commented

Closing as v7 has now been released and the input will no longer render narrower than the placeholder text.

jtojnar commented

Thanks. But it looks like there is still some pathological case in InputSizer:

Screencast.from.2023-07-16.17-03-38.webm

Will try to debug it closer next week.

Edit: Can reproduce it by foo bar and then b in your demo as well.