textinput: placeholder changes component width

[seanbanko]

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.

[residualmind]

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]

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]

@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]

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]

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.