area with a background color that includes a textinput does not always honor the background color

[tomgeorge]

Please let me know if this discussion should be had in lipgloss instead. I wasn't sure if it was a lipgloss thing or a textinput thing.

Example of the behavior:

Screen.Recording.2023-12-04.at.5.53.00.PM.mov

I'm trying to write a TUI that will set the background color of a particular section of the app depending on whether or not it is focused. When I try to do this to a section containing a textinput, I notice that as I type, the background color is disabled depending on where the cursor is. Is this a bug or am I missing a styling section somewhere? The code below should reproduce this:

package main

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

type Model struct {
	width int
	input textinput.Model
}

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.WindowSizeMsg:
		m.width = 50
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		}
	}
	var cmd tea.Cmd
	m.input.Focus()
	m.input, cmd = m.input.Update(msg)
	return m, cmd
}

var labelStyle = lipgloss.NewStyle().
	Background(lipgloss.Color("#ea999c")).
	Foreground(lipgloss.Color("#232634")).
	MarginBottom(1)

func (m Model) View() string {
	focusedStyle := lipgloss.NewStyle().Border(lipgloss.RoundedBorder(), true)
	x := focusedStyle.GetHorizontalFrameSize()

	return focusedStyle.
		Copy().
		Width(m.width - x).
		Background(lipgloss.Color("#737994")).
		Render(
			lipgloss.JoinVertical(lipgloss.Left,
				labelStyle.Render("Title"),
				m.input.View()))
}

func main() {
	model := Model{input: textinput.New()}
	program := tea.NewProgram(model)
	program.Run()
}