Making multiple inputs blink

[ic-768]

Hi all. I'm new to bubble tea and bubbles, and I'm trying to make multiple inputs blink, however I can only make the very first one work. All successive inputs don't have cursor blinking

Here's my code

package main

import (
	"fmt"
	"log"

	"github.com/charmbracelet/bubbles/textarea"
	"github.com/charmbracelet/bubbles/textinput"
	tea "github.com/charmbracelet/bubbletea"
)

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

type (
	errMsg error
)

type model struct {
	nameInput textinput.Model
	noteInput textarea.Model

	step int
	err  error
}

func initialModel() model {
	nameInput := textinput.New()
	nameInput.Placeholder = "Dwight"
	nameInput.Focus()
	nameInput.CharLimit = 156
	nameInput.Width = 20

	noteInput := textarea.New()
	noteInput.Placeholder = "Make a note..."

	return model{
		nameInput: nameInput,
		noteInput: noteInput,
		err:       nil,
		step:      1,
	}
}

func (m model) Init() tea.Cmd {
	return tea.Batch(
		textinput.Blink,
		textarea.Blink, // Add the blinking command for the textarea
	)
}

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

	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.Type {
		// QUIT
		case tea.KeyCtrlC, tea.KeyEsc:
			return m, tea.Quit

		// INCREMENT STEP
		case tea.KeyEnter:
			m.step += 1
			return m, nil
		}

	case errMsg:
		m.err = msg
		return m, nil
	}

	switch m.step {
	case 1:
		m.nameInput, cmd = m.nameInput.Update(msg)
	case 2:
		m.nameInput.Blur()
		m.noteInput.Focus()
		m.noteInput, cmd = m.noteInput.Update(msg)
	}

	return m, cmd
}

func (m model) View() string {
	var s string = fmt.Sprintf(
		"What’s your name?\n\n%s",
		m.nameInput.View(),
	) + "\n"

	if m.step == 2 {
		s += fmt.Sprintf(
			"Tell me a story.\n\n%s",
			m.noteInput.View())
	}

	return s
}

nameInput's cursor blinks fine. But noteInput doesn't. Also changing noteInput to another textInput doesn't help.

[codingcn]

same issue

[naglis]

Suggestions:

• Move nameInput.Blur()/noteInput.Focus() to where the step is incremented. Now these methods are called each time a key is pressed when noteInput is focused.
• noteInput.Focus() returns a command. Handle it to get the cursor to blink.

@@ -66,6 +66,10 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		// INCREMENT STEP
 		case tea.KeyEnter:
 			m.step += 1
+			if m.step == 2 {
+				m.nameInput.Blur()
+				return m, m.noteInput.Focus()
+			}
 			return m, nil
 		}
 
@@ -78,8 +82,6 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	case 1:
 		m.nameInput, cmd = m.nameInput.Update(msg)
 	case 2:
-		m.nameInput.Blur()
-		m.noteInput.Focus()
 		m.noteInput, cmd = m.noteInput.Update(msg)
 	}

[bashbunni]

Hey @ic-768, welcome in!

From what I see here, it looks like you'd be better off using []tea.Cmd and appending commands that may need to execute, then calling for their execution with tea.Batch.

When you return only a single command, that is the only operation happening during that Update call. If you may want more than one command running from an Update, then you'll have to add those to the list and use something like tea.Batch or tea.Sequence. You can further search the Bubble Tea repo for "Batch", "Sequence", or even "[]tea.Cmd" to find some relevant examples for you.

	m.textarea, cmd = m.textarea.Update(msg)
	cmds = append(cmds, cmd)
	return m, tea.Batch(cmds...)

You can see an example of this here: https://github.com/charmbracelet/bubbletea/blob/c1cd8bba561eacea8f0985cad4a718c1a9cde61d/examples/textarea/main.go#L70-L72

More on commands: https://charm.sh/blog/commands-in-bubbletea/

I hope that helps! Please let me know if anything is still unclear after what I've included above :)

[activey]

Well, you need to return blink result of every input in update()?