Width / Overflow issues with "Editable Text" component

💬 App Building
1

Hi everyone :wave:

I want to use the "Editable Text" component to handle updating notes on user's accounts in our admin system. The component itself works well but I'm having some styling issues with the component's width. I feel one issue might be a bug, while the other could benefit from allowing us to control the "overflow" of the text component.

Potential Bug
When using the "auto" width setting and clicking to edit the text, the width of the input field shrinks drastically in size. It also does not widen as more characters are typed. It makes it really difficult to write long text with the auto width setting. Example:

The issue with the input field width doesn't happen when the component's width is set to "fixed" or "fill", but I'd like to keep it set to "auto" so that the component's edit icon and my custom delete icon aren't floating off way to the right of the screen when the note itself is only a few words long. It would be ideal to have those icons always positions just to the right of the end of the note

Overflow issue

For longer notes, it would be great if we had control over the overflow. Here is the current behaviour for each width type:

  • auto: the width keeps scaling resulting in the "Editable Text" container becoming wider than the parent container. This introduced horizontal scroll
  • fixed: the specific width is respected and the text becomes truncated when it is too long.
  • fill: the width keeps scaling resulting in the "Editable Text" container becoming wider than the parent container. This introduced horizontal scroll

Example of auto width:

Ideally, with how the component currently works, once the auto and fill width fills the available width of the parent container, the text would become truncate, just like the fixed width. An added bonus would be then to allow us to have more control over this truncated text by either:

  • wrapping the text so that the component maintains the width but expands in height
  • displaying the full text in a tool tip when hovering over the truncated text.

If anyone has any suggestions for things I can improve on my end, please let me know. :pray:

2

Hi @cosmick,

Thanks for the detailed reports! I don't see these bugs/feature requests on our roadmap yet, but I will put in a couple of requests