charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.35k stars 252 forks source link

fix: handle textinput max-width edge cases #484

Open JaredReisinger opened 6 months ago

JaredReisinger commented 6 months ago

I noticed that the cursor seemed to be adding an extra space which the width calculations weren't accounting for. This also led me to discover an edge case with the view (offset/offsetRight) calculation when the cursor (pos) sits at the very end. Additionally, View() was always rendering the cursor, even when focus was false, which the comment suggests should not be the case.

These should all be resolved, such that Width is now fully respected in both View() and placeholderView(): they should never render a string that exceeds the requested width. (Well... with one caveat: I did not touch the suggestion/completion logic, as I've never used it. I did leave a comment, however, that perhaps suggestions shouldn't even render when the component does not have focus.)

Fixes #358, #307

JaredReisinger commented 6 months ago

My particular use-case involves dynamically setting the Width as edits are happening (it's a semi-WYSIWYG-style TUI), using len(text.Value()) + 1 when it has focus, and len(text.Value()) when it does not. Without this PR, the textinput was always rendering two extra spaces at the end. With this fix, the textinput only renders the requested Width.

I can provide a minimal repro example if needed.

maaslalani commented 2 months ago

@JaredReisinger A minimal reproducible example would be great, showing the error / issue and then how this PR fixes that!