textinput: placeholder changes component width #358

seanbanko · 2023-03-23T13:59:06Z

I'm seeing strange behavior using a Placeholder with the textinput bubble. Here is a minimum reproducible example:

package main

import (
	"os"

	"github.com/charmbracelet/bubbles/textinput"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

type model struct {
	input textinput.Model
}

func main() {
	m := newModel()
	p := tea.NewProgram(m)
	if _, err := p.Run(); err != nil {
		os.Exit(1)
	}
}

func newModel() model {
	input := textinput.New()
	input.Prompt = " "
	input.Width = 5
	input.Placeholder = "123"
	input.Focus()
	return model{input: input}
}

func (m model) Init() tea.Cmd {
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		}
	}
	var cmd tea.Cmd
	m.input, cmd = m.input.Update(msg)
	return m, cmd
}

func (m model) View() string {
	return lipgloss.NewStyle().Border(lipgloss.RoundedBorder()).Render(m.input.View())
}

Changing the length of the Placeholder string changes the way that the textinput is rendered before it receives the first character, triggering a resize after the first character is received. See examples with various Placeholders.

Placeholder = "123"

Placeholder = "12345"

Placeholder = "1234567890"

Placeholder = "12345 " (with trailing space)

no Placeholder

So to avoid a resize it seems there needs to either be no Placeholder at all, or the length of the Placeholder must be equal to Width + 1.

The text was updated successfully, but these errors were encountered:

residualmind · 2023-07-29T10:28:33Z

I just looked into fixing this - and it is a simple fix to basically cut the placeholder off, so that the width never changes. But the current behavior could have benefits: You can have input fields that are narrow to not take up a lot of space but when you focus them, you can set a longer placeholder to describe the field - and unset that placeholder again when you unfocus... So people might depend on this behavior?

This would be a very simple possible patch: (Not making a PR because I'm really not sure what the desired behavior is. But I'd happy to create a PR.)

diff --git a/textinput/textinput.go b/textinput/textinput.go
index e7bd08b..2d863c0 100644
--- a/textinput/textinput.go
+++ b/textinput/textinput.go
@@ -651,8 +651,8 @@ func (m Model) placeholderView() string {
    m.Cursor.SetChar(p[:1])
    v += m.Cursor.View()
 
-   // The rest of the placeholder text
-   v += style(p[1:])
+   // The rest of the placeholder text, cut off to fit the width
+   v += style(p[1:m.Width] + " ")
 
    return m.PromptStyle.Render(m.Prompt) + v
 }

Static-Flow · 2023-08-26T14:06:25Z

Took me a long time to find the issue that was causing this bug. Personally, the behavior I would expect is that if a placeholder string is smaller than the defined width of the component, it shouldn't shrink the component width.

seanbanko · 2023-09-21T04:47:56Z

@residualmind nice find. Personally, I agree with @Static-Flow that if a placeholder is smaller than the text input, it shouldn't shrink the text input. That seems counter to the notion of setting a width on the text input in the first place, and the current behavior feels pretty inconsistent with, well, most other text inputs I've come across. Would you mind making a PR (or I'd be glad to make one with your change) and maybe someone from the core team can merge or decline if they feel that the current behavior is the desired behavior?

meowgorithm · 2023-09-21T15:04:10Z

Hey everyone. So if I understand this correctly the thought is that the placeholder should get truncated if the width of the textinput is narrower than the width of the placeholder, correct?

If so, that's definitely the desired behavior; please do make a PR. Use lipgloss.Width to measure widths.

mikelorant · 2024-02-03T08:09:38Z

Is this issue actually resolved now? Seems that the fix was merged.

I've run up the test app in the original message and it seems to be working correctly now.

@meowgorithm You should be able to close this one.

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 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 charmbracelet#358, charmbracelet#307

seanbanko mentioned this issue Nov 25, 2023

fix (textinput): do not resize based on placeholder #442

Merged

donovanhubbard mentioned this issue Dec 21, 2023

(fix)textInput: Placeholder View now respects set Width, Paste Fix #449

Closed

JaredReisinger linked a pull request Feb 28, 2024 that will close this issue

fix: handle textinput max-width edge cases #484

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

textinput: placeholder changes component width #358

textinput: placeholder changes component width #358

seanbanko commented Mar 23, 2023

residualmind commented Jul 29, 2023 •

edited

Static-Flow commented Aug 26, 2023

seanbanko commented Sep 21, 2023

meowgorithm commented Sep 21, 2023

mikelorant commented Feb 3, 2024 •

edited

textinput: placeholder changes component width #358

textinput: placeholder changes component width #358

Comments

seanbanko commented Mar 23, 2023

residualmind commented Jul 29, 2023 • edited

Static-Flow commented Aug 26, 2023

seanbanko commented Sep 21, 2023

meowgorithm commented Sep 21, 2023

mikelorant commented Feb 3, 2024 • edited

residualmind commented Jul 29, 2023 •

edited

mikelorant commented Feb 3, 2024 •

edited