charmbracelet / charmbracelet/bubbles

textinput: placeholder changes component width

Open
#358 5 comments 2 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
8.9k
Forks
457
Avg merge
1d 18h
Merged PRs (30d)
5

Description

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"
![demo-1](https://user-images.githubusercontent.com/74473367/227225452-cb80fafe-3d70-4b62-8807-1dec858fde75.gif)

Placeholder = "12345"
![demo-2](https://user-images.githubusercontent.com/74473367/227225484-69670867-2256-4582-8e0f-70fae4151458.gif)

Placeholder = "1234567890"
![demo-3](https://user-images.githubusercontent.com/74473367/227225494-71e4c74c-aa63-4af3-bf18-34eb49b71516.gif)

Placeholder = "12345 " (with trailing space)
![demo-4](https://user-images.githubusercontent.com/74473367/227225511-d0cadc58-2e8b-48cb-b2d2-333f6b6d98a5.gif)

no Placeholder
![demo-5](https://user-images.githubusercontent.com/74473367/227226560-79b4d948-9b4f-4881-aa23-92815fb3b7c5.gif)

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.