How to use multiple forms within a BubbleTea app

[jonascollen]

Hi,

To preface this i'm very new to writing Go but after finding all the cool CLI tools available like Bubbletea, Lipgloss and now huh I had to give it a try.

I'm trying to build a TUI where we ask the user for a device, do some checks and depending if the device already exist I want to display a second form with additional questions for the user.

My Problem

Generating and displaying a second form depending on previous input data works, but navigating it does not. In a NewSelect-group I can't go up/down/confirm an option in the list.

If I change the order so detailedForm is displayed first it works so I must be doing something wrong here..

Code:

...
type Model struct {
	hostnameForm  *huh.Form
	detailedForm  *huh.Form
	err           error
	dbFile        string
	deviceType    string
	deviceName    string
	deviceStatus  string
	deviceInit    bool // Have we initialized the device
	deviceInstall bool // Do we want to install the device
	deviceExists  bool // Does the device exist in the database	
        detailedFormInit bool
}

func NewModel() Model {
	m := Model{}

	m.hostnameForm = huh.NewForm(
		huh.NewGroup(
			huh.NewInput().
				Key("hostname").
				Placeholder("device-abc").
				Title("Hostname"),
		),
	)

	m.detailedForm = huh.NewForm(huh.NewGroup(
		huh.NewSelect[string]().
			Title("Device already exists in database").
			Key("existing_device").
			Options(
				huh.NewOption("Do nothing", "nothing").Selected(true),
				huh.NewOption("Delete device from database", "delete"),
				huh.NewOption("Move device back to queue", "waiting"),
			).Description("\nWhat do you want to do?\n\n"),
	))

	return m
}

func (m Model) Init() tea.Cmd {
	return tea.Batch(m.hostnameForm.Init(), m.detailedForm.Init())
}

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.width = min(msg.Width, maxWidth) - m.styles.Base.GetHorizontalFrameSize()
	case tea.KeyMsg:
		switch msg.String() {
		case "esc", "ctrl+c", "q":
			return m, tea.Quit
		}
	case fetchModel:
		if msg.Err != nil {
			m.err = msg.Err
			return m, nil
		}
		m.dbFile = msg.dbFile
		m.deviceType = msg.deviceType
		return m, m.loadDeviceDB(m.deviceName, msg.dbFile)
	case loadDeviceDB:
		if msg.Err != nil {
			m.err = msg.Err
			return m, nil
		}
		m.deviceStatus = msg.status
		m.deviceInit = true
		if msg.status != "new" {
			m.deviceExists = true
		}
		return m, nil
	}

	var cmds []tea.Cmd

	// Process the hostname form
	if !m.deviceInit {
		hostname, cmd := m.hostnameForm.Update(msg)
		if f, ok := hostname.(*huh.Form); ok {
			m.hostnameForm = f
			cmds = append(cmds, cmd)
		}
	}

	if m.hostnameForm.State == huh.StateCompleted {
		m.deviceName = m.hostnameForm.GetString("hostname")
		return m, m.fetchModel(m.deviceName)
	}

	// Device exists, determine next step
	if m.deviceExists && m.detailedForm.State != huh.StateCompleted {
		detailed, cmd := m.detailedForm.Update(msg)
		if df, ok := detailed.(*huh.Form); ok {
			m.detailedForm = df
			cmds = append(cmds, cmd)
		}
	}

	if m.detailedForm.State == huh.StateCompleted {
		cmds = append(cmds, tea.Quit)
	}

	return m, tea.Batch(cmds...)
}

func (m Model) View() string {
	s := m.styles

	if !m.deviceInit {
		return s.Base.Render(m.hostnameForm.View())
	}

	if m.deviceExists && m.detailedForm.State != huh.StateCompleted {
		return s.Base.Render(m.detailedForm.View())
	}

	return "Nothing"
}

func main() {
	_, err := tea.NewProgram(NewModel()).Run()
	if err != nil {
		fmt.Println("Oh no:", err)
		os.Exit(1)
	}
}

[jonascollen]

For reference, I kind of got it working after using m.detailedForm.Run(), not sure if there is a better way of doing it.

...
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) 
        ...
	case loadDeviceDB:
		if msg.Err != nil {
			m.err = msg.Err
			return m, nil
		}
		m.deviceStatus = msg.status
		m.deviceInit = true
		if msg.status != "new" {
			m.deviceExists = true
			if !m.detailedFormInit {
				m.detailedForm.Run()
				m.detailedFormInit = true
			}
		}
		return m, nil
...

If I do this the form is displayed correctly and I can navigate the list with keys/confirm choice.

[jonascollen]

Id like to add another question that I feel is related as its very relevant to using multiple forms.

What would be the best way to have dynamic questions/descriptions in my secondary form(s)?

For example, instead of saying:

...
	m.detailedForm = huh.NewForm(huh.NewGroup(
		huh.NewSelect[string]().
			Title("Device already exists in database").
...

Id like to include the device name (m.deviceName). That variable is however empty when the Model is initialized in my func NewModel() Model {... currently so I would need to update my form-fields later on.

[jonascollen]

I think this post can be deleted as it's probably more confusing than helping in its current state.
After trying some more I did not need to use m.detailedForm.Run() to get it working, so it must have been another mistake I did. Rewritten it a couple of times now and it works as expected now.

Still interested in a solution of dynamic questions/descriptions but I think its better that I post that as a separate topic .