displaying suggestions in a textinput overflows the width

[thomasmckinstry]

With the textinput component, the width of the input is ignored when displaying suggestions. In my use case, this is causing the UI to resize in a way that doesn't look very nice. This happens even when the length of the suggestion is shorter than the width of the textinput component.

Is there a way to make the suggestions adhere to the set width of the component? I looked through the documentation and couldn't find anything. I also thought about just truncating the textinput View to the width I was expecting but that caused issues with the cursor. I found another discussion post talking about this issue but no one had responded to it.

Here is the textinput demo code that I was using to test out possible fixes.

import (
	"fmt"
	"log"

	"charm.land/bubbles/v2/textinput"
	tea "charm.land/bubbletea/v2"
	"charm.land/lipgloss/v2"
)

func main() {
	p := tea.NewProgram(initialModel())
	if _, err := p.Run(); err != nil {
		log.Fatal(err)
	}
}

type model struct {
	textInput textinput.Model
	style     lipgloss.Style
}

func initialModel() model {
	ti := textinput.New()
	ti.Placeholder = "Pikachu"
	ti.CharLimit = 35
	ti.Focus()
	ti.SetSuggestions([]string{"<example-suggestion>"})
	ti.ShowSuggestions = true
	ti.SetWidth(10)

	return model{
		textInput: ti,
		style: lipgloss.NewStyle().
			BorderStyle(lipgloss.NormalBorder()),
	}
}

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

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var cmd tea.Cmd

	switch msg := msg.(type) {
	case tea.KeyPressMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		default:
			m.textInput, cmd = m.textInput.Update(msg)
		}
	default:
		m.textInput, cmd = m.textInput.Update(msg)
	}
	return m, cmd
}

func (m model) View() tea.View {
	var c *tea.Cursor
	c = m.textInput.Cursor()

	str := lipgloss.JoinVertical(lipgloss.Top, m.headerView(), m.style.Render(m.textInput.View()), m.footerView())
	str += "\n"

	str += fmt.Sprintf("\nWidth: %d", lipgloss.Width(m.textInput.View()))
	v := tea.NewView(str)
	v.Cursor = c
	v.AltScreen = true

	return v
}

func (m model) headerView() string { return "What’s your favorite Pokémon?\n" }
func (m model) footerView() string { return "\n(ctrl+c to quit)" }

[akashrtd]

this is a known bug, tracked in #812, still open with no fix. the SetWidth value gets ignored when a suggestion is displayed because View() renders the full suggestion text past the width cap.

until it's fixed upstream, the cleanest workaround is to clip the rendered view yourself with lipgloss and place it on a fixed block, rather than truncating the model's internal text (which is what breaks the cursor):

func (m model) View() string {
    raw := m.textInput.View()
    clipped := lipgloss.NewStyle().MaxWidth(m.width).Render(raw)
    // wrap in a fixed-width container so neighbors don't shift
    return lipgloss.NewStyle().Width(m.width).Render(clipped)
}

the key bit is MaxWidth on the render, not SetWidth on the input. MaxWidth trims the display cells without touching the model's cursor offset or echo string, so cursor positioning stays correct.

if the suggestion text itself is the eyesore, you can also just not show suggestions (ShowSuggestions = false) and do your own completion dropdown below the input, but that's more work.

worth dropping a +1 on #812 if you want it prioritized, the maintainers have acknowledged it.