Auto generate duplicated content after resized window size

[yangguansen]

Describe the bug
1.Use chat example of bubbletea v2
2.Input some content, like 5 rows hi1, hi2, hi3, hi4, hi5
3.Resize terminal window size, resize down and resize up
4.It generate some unwanted duplicated content

I notice Gemini CLI also had this issue before (google-gemini/gemini-cli#2623), but they fixed this recently, not sure if the root reason is same.

Setup
Please complete the following information along with version numbers, if applicable.

• OS [Ubuntu]
• Terminal Emulator [vscode terminal]

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Source Code

package main

// A simple program demonstrating the text area component from the Bubbles
// component library.

import (
	"fmt"
	"log"
	"strings"

	"github.com/charmbracelet/bubbles/v2/textarea"
	"github.com/charmbracelet/bubbles/v2/viewport"
	tea "github.com/charmbracelet/bubbletea/v2"
	"github.com/charmbracelet/lipgloss/v2"
)

const gap = "\n\n"

func main() {
	p := tea.NewProgram(initialModel())

	if _, err := p.Run(); err != nil {
		log.Fatal(err)
	}
}

type (
	errMsg error
)

type model struct {
	viewport    viewport.Model
	messages    []string
	textarea    textarea.Model
	senderStyle lipgloss.Style
	err         error
}

func initialModel() model {
	ta := textarea.New()
	ta.Placeholder = "Send a message..."
	ta.Focus()

	ta.Prompt = "┃ "
	ta.CharLimit = 280

	ta.SetWidth(30)
	ta.SetHeight(3)

	// Remove cursor line styling
	ta.Styles.Focused.CursorLine = lipgloss.NewStyle()

	ta.ShowLineNumbers = false

	vp := viewport.New()
	vp.FillHeight = true
	vp.SetWidth(30)
	vp.SetHeight(5)
	vp.SetContent(`Welcome to the chat room!
Type a message and press Enter to send.`)

	ta.KeyMap.InsertNewline.SetEnabled(false)

	return model{
		textarea:    ta,
		messages:    []string{},
		viewport:    vp,
		senderStyle: lipgloss.NewStyle().Foreground(lipgloss.Color("5")),
		err:         nil,
	}
}

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

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

	m.textarea, tiCmd = m.textarea.Update(msg)
	m.viewport, vpCmd = m.viewport.Update(msg)

	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.viewport.SetWidth(msg.Width)
		m.textarea.SetWidth(msg.Width)
		m.viewport.SetHeight(msg.Height - m.textarea.Height() - lipgloss.Height(gap))

		if len(m.messages) > 0 {
			// Wrap content before setting it.
			m.viewport.SetContent(lipgloss.NewStyle().Width(m.viewport.Width()).Render(strings.Join(m.messages, "\n")))
		}
		m.viewport.GotoBottom()
	case tea.KeyPressMsg:
		switch msg.String() {
		case "ctrl+c", "esc":
			fmt.Println(m.textarea.Value())
			return m, tea.Quit
		case "enter":
			m.messages = append(m.messages, m.senderStyle.Render("You: ")+m.textarea.Value())
			m.viewport.SetContent(lipgloss.NewStyle().Width(m.viewport.Width()).Render(strings.Join(m.messages, "\n")))
			m.textarea.Reset()
			m.viewport.GotoBottom()
		}

	// We handle errors just like any other message
	case errMsg:
		m.err = msg
		return m, nil
	}

	return m, tea.Batch(tiCmd, vpCmd)
}

func (m model) View() tea.View {
	v := tea.NewView(fmt.Sprintf(
		"%s%s%s",
		m.viewport.View(),
		gap,
		m.textarea.View(),
	))
	v.BackgroundColor = lipgloss.Green
	return v
}

Expected behavior
It should keep screen content same to what Viewport has.

Video
https://github.com/user-attachments/assets/3521f915-934a-4520-9c7d-7418da16d2f4

[VaibhavVermaa16]

The current code updates the textarea and viewport components first (at the top of the function), then tries to handle WindowSizeMsg. This means:

• The viewport already processed the resize and updated its internal state

• Then the code manually updates dimensions and content again

• This double-processing causes the duplication

[aymanbagabas]

@yangguansen Are you still facing this problem? Could you try the v2-exp branch?

[yangguansen]

The root point is AltScreen, for using v2-exp with v.AltScreen=true, if doesn't has problem.
But if using inline mode (not set AltScreen to true), it still exists.

[aymanbagabas]

The root point is AltScreen, for using v2-exp with v.AltScreen=true, if doesn't has problem. But if using inline mode (not set AltScreen to true), it still exists.

I can't reproduce the problem with v.AltScreen = false from the v2-exp branch. The leftover content above the view comes from the previous render and it is expected. When the application is using the whole screen and is not using the altscreen, the terminal will push lines up to the scroll buffer when resizing.

The fix here is to use v.AltScreen = true when the program is expected to use the whole screen.