fix(textinput): wrong placeholder/completion rendering

[luevano]

Fixes:

• Completion using Placeholder style (only the cursor was using the Completion style)
• Extra padding after completion.
• Wrong completion char under cursor when overflowing (using index of viewable viewport instead of the completion)

TODO/discuss:

• What should the Width apply to? both the input text + cursor? only the text? the whole thing with the prompt? Because as of right now, the actual width of the view is Width + cursor + prompt

Some examples, using contrasting colors for easier identification. Showing a half box below just to see the width, and appended a "Ñ" to see the end of the input view.

Before fix:
Width set to 10, showing the placeholder color:

Extra padding after completion (what should be appended without completion), and the color under the cursor is what should be displayed for the whole completion:

Wrong completion character showing under cursor when overflowing (should show a 'k'):

After fix:
Correct completion style applied:

Correct completion char used under cursor when overflowing:

[meowgorithm]

Thanks, @luevano. Could you provide some code we can use to see the before and after?

[luevano]

Thanks, @luevano. Could you provide some code we can use to see the before and after?

Hi @meowgorithm, no problem, made it as short as possible (ctrl+o: toggle size; ctrl+c: quit):

package main

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

type Model struct {
	input textinput.Model
	long  bool

	size,
	sizeShort int
	end string
}

func newModel() *Model {
	size, sizeShort := 64, 10
	input := textinput.New()
	input.Placeholder = "Long placeholder..."
	input.ShowSuggestions = true
	input.Width = size
	input.PlaceholderStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("#008080"))
	input.CompletionStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("#EB5E28"))

	input.SetSuggestions([]string{
		"hello",
		"world",
		"some long suggestion",
		"another very long suggestion...",
	})

	return &Model{
		input:     input,
		long:      true,
		size:      size,
		sizeShort: sizeShort,
		end:       lipgloss.NewStyle().Foreground(lipgloss.Color("#FF0000")).Render("Ñ"),
	}
}

func (m *Model) Init() tea.Cmd {
	m.input.CursorEnd()
	return tea.Sequence(
		m.input.Focus(),
		textinput.Blink,
	)
}

func (m *Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.Type {
		case tea.KeyCtrlC:
			return m, tea.Quit
		case tea.KeyCtrlO:
			m.long = !m.long
			if m.long {
				m.input.Width = m.size
			} else {
				m.input.Width = m.sizeShort
			}
		}
	}

	input, cmd := m.input.Update(msg)
	m.input = input
	return m, cmd
}

func (m *Model) View() string {
	return m.input.View() + m.end
}

func main() {
	if _, err := tea.NewProgram(newModel()).Run(); err != nil {
		panic(err)
	}
}

[bashbunni]

Hey @luevano sorry for the delay on this. The changes look great. I think width should include everything (even cursor + prompt) as that will be the most predictable behaviour. That said, I'll ask the team to see if they have any thoughts on this too.

[bashbunni]

Update, team agreed that the width should contain all components including the text field, cursor, and prompt

[luevano]

@bashbunni thanks for the feedback, I agree with that.
I did, however, try to fix the whole thing to fit within the given width, fut failed miserably lol I did try to do that back when I was working on this fix, will give it another go and see what I can do.

[bashbunni]

@luevano no problem! I can see about fixing the width :) thanks again for your work on this