react-tags icon indicating copy to clipboard operation
react-tags copied to clipboard

Published 20 hours ago • verified publisher icon i-like-robots

Autoresize causes input to jump around

Open jtojnar opened this issue 3 years ago • 1 comments

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

https://user-images.githubusercontent.com/705123/150530888-41630ceb-3edd-4e73-8fca-1b8d5f0ea4de.mp4

Your environment

  • OS: NixOS
  • Browser: Firefox 96.0.1, Chromium too.
  • Version of the component: 6.3.0
  • React version: 17.0.2

jtojnar avatar Jan 21 '22 13:01 jtojnar

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

i-like-robots avatar May 10 '22 10:05 i-like-robots

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

i-like-robots avatar Jul 15 '23 21:07 i-like-robots

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.

jtojnar avatar Jul 16 '23 15:07 jtojnar