On search title is losing styling

[abhimanyu003]

On search title losing formatting, it could be i'm doing something wrong or this is an actual issue.
I'm attaching sample code for quick test

Screenshot:

Video:

Recording.2022-10-10.18-01-33.from.Snipclip.webm

Quick sample code:

package main

import (
	"encoding/json"
	"fmt"
	"os"

	"github.com/charmbracelet/bubbles/list"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

var docStyle = lipgloss.NewStyle().Margin(1, 2)
var special = lipgloss.AdaptiveColor{Light: "#43BF6D", Dark: "#73F59F"}
var strike = lipgloss.NewStyle().
	Strikethrough(true).
	Foreground(lipgloss.AdaptiveColor{Light: "#969B86", Dark: "#696969"})

var checkMark = lipgloss.NewStyle().SetString("✓").
	Foreground(special).
	PaddingRight(1).
	String()
var crossMark = lipgloss.NewStyle().SetString("x").
	Foreground(lipgloss.AdaptiveColor{Light: "#f44336", Dark: "#cc0000"}).
	PaddingRight(1).
	String()

type Response struct {
	Resources []resource `json:"resources"`
}

type resource struct {
	Name   string `json:"name"`
	Status string `json:"status"`
}

func (i resource) Title() string {
	name := i.Name
	if i.Status == "Running" {
		return fmt.Sprintf("%s%s", checkMark, name)
	}
	return crossMark + strike.Render(name)
}

func (i resource) Description() string {
	return ""
}

func (i resource) FilterValue() string { return i.Name }

type model struct {
	list list.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.KeyMsg:
		if msg.String() == "ctrl+c" {
			return m, tea.Quit
		}
	case tea.WindowSizeMsg:
		h, v := docStyle.GetFrameSize()
		m.list.SetSize(msg.Width-h, msg.Height-v)
	}

	var cmd tea.Cmd
	m.list, cmd = m.list.Update(msg)
	return m, cmd
}

func (m model) View() string {
	return docStyle.Render(m.list.View())
}

func main() {
	var response Response
	err := json.Unmarshal([]byte("{\"resources\":[{\"name\":\"adam-test-1\",\"status\":\"Running\"},{\"name\":\"test-2\",\"status\":\"Running\"},{\"name\":\"test-3\",\"status\":\"Running\"}]}"), &response)
	if err != nil {
		panic(err)
	}
	items := []list.Item{}
	for _, v := range response.Resources {
		items = append(items, v)
	}
	m := model{list: list.New(items, list.NewDefaultDelegate(), 0, 0)}
	m.list.Title = "Testing"
	p := tea.NewProgram(m, tea.WithAltScreen())
	if err := p.Start(); err != nil {
		fmt.Println("Error running program:", err)
		os.Exit(1)
	}
}

[muesli]

Setting styles inside list items isn't currently supported and I'm not sure we should support that. In such a case you probably want to write your own item delegate to influence how items gets rendered. You can see an example of how that's done in the list-fancy example: https://github.com/charmbracelet/bubbletea/tree/master/examples/list-fancy

[abhimanyu003]

Style inside of list is working fine when it's rendered first, it only breaks when you start searching. It's not even breaking on pagger/pagiation.

[meowgorithm]

The reason it's breaking is because the styled string, including its ANSI escape codes used to style the string are being matched by the filter. The filter tries to use it's own ANSI styling to highlight matched characters, which are breaking apart the styling you've pre-applied.

To style list items in a basic fashion you can edit the default styles on the default delegate. See DefaultDelegate, NewDefaultDelegate, DefaultItemStyles, and NewDefaultItemStyles.

For there further, more detailed customization you should write your own delegate.

[bashbunni]

@abhimanyu003 is it breaking when you search if you set styling through the item delegate as muesli recommended? That is the way we suggest customizing list item styling. If there's an issue with it, please let us know

[bashbunni]

Going to move this to a discussion, if there's a bug or anything actionable that needs to take place after, we can open an issue to address it