[GH-ISSUE #481] Dynamically insert\remove form fields based on other inputs while keeping their order #348

Closed
opened 2026-03-04 01:04:13 +03:00 by kerem · 3 comments
Owner

Originally created by @maxiride on GitHub (Jul 30, 2020).
Original GitHub issue: https://github.com/rivo/tview/issues/481

In the design of a TUI I have a main and a secondary drop down, based on the selection made on the main one I want to "swap" the secondary drop down accordingly.

ddProdotti is the main one and prodottoScelto is a variable where I assign the correct drop down to use and draw.

When the selection on the main dropdown changes I remove the previous field from the form and add the new one, the code works as expected however on the first run I correctly have

  • main dropdown
  • secondary dropdown
  • checkbox

whenever the main dropdown selection is changed the new dropdown is redrawn in the last position

  • main dropdown
  • checkbox
  • secondary dropdown

-> How can I keep the from consistent when removing and adding elements to it? This is most important when later on I collect the form values using the form fields indexes.
Otherwise is there a reccomended workflow to keep the fields order (hence the indexes) consistent?

	flexProdotti := tview.NewFlex()
	pages.AddPage("prodotti", flexProdotti, true, false)
	formProdotto := tview.NewForm()
	flexProdotti.AddItem(formProdotto, 0, 1, false)

	// Dropdown prodotto
	ddProdotti := tview.NewDropDown()
	ddProdotti.SetLabel("Seleziona un prodotto: ")
	ddProdotti.SetOptions(listaProdotti, nil)
	ddProdotti.SetSelectedFunc(func(text string, index int) {
		formItems := formProdotto.GetFormItemCount()

		switch index {
		case 0:
			prodottoScelto = lBase
		case 1:
			prodottoScelto = lRacc
		case 2:
			prodottoScelto = lTele
		case 3:
			prodottoScelto = lWel
		case 4:
			prodottoScelto = lSpot
		default:
		}
		if formItems > 2 {
			index := formProdotto.GetFormItemIndex("Seleziona un servizio: ")
			formProdotto.RemoveFormItem(index)
		}
		formProdotto.AddFormItem(prodottoScelto)
	})

	formProdotto.AddFormItem(ddProdotti)

	// Checkbox laser
	formProdotto.AddCheckbox("Laser", false, nil)
Originally created by @maxiride on GitHub (Jul 30, 2020). Original GitHub issue: https://github.com/rivo/tview/issues/481 In the design of a TUI I have a main and a secondary drop down, based on the selection made on the main one I want to "swap" the secondary drop down accordingly. `ddProdotti` is the main one and `prodottoScelto` is a variable where I assign the correct drop down to use and draw. When the selection on the main dropdown changes I remove the previous field from the form and add the new one, the code works as expected however on the first run I correctly have - main dropdown - secondary dropdown - checkbox whenever the main dropdown selection is changed the new dropdown is redrawn in the last position - main dropdown - checkbox - secondary dropdown -> How can I keep the from consistent when removing and adding elements to it? This is most important when later on I collect the form values using the form fields indexes. Otherwise is there a reccomended workflow to keep the fields order (hence the indexes) consistent? ```Go flexProdotti := tview.NewFlex() pages.AddPage("prodotti", flexProdotti, true, false) formProdotto := tview.NewForm() flexProdotti.AddItem(formProdotto, 0, 1, false) // Dropdown prodotto ddProdotti := tview.NewDropDown() ddProdotti.SetLabel("Seleziona un prodotto: ") ddProdotti.SetOptions(listaProdotti, nil) ddProdotti.SetSelectedFunc(func(text string, index int) { formItems := formProdotto.GetFormItemCount() switch index { case 0: prodottoScelto = lBase case 1: prodottoScelto = lRacc case 2: prodottoScelto = lTele case 3: prodottoScelto = lWel case 4: prodottoScelto = lSpot default: } if formItems > 2 { index := formProdotto.GetFormItemIndex("Seleziona un servizio: ") formProdotto.RemoveFormItem(index) } formProdotto.AddFormItem(prodottoScelto) }) formProdotto.AddFormItem(ddProdotti) // Checkbox laser formProdotto.AddCheckbox("Laser", false, nil) ```
kerem closed this issue 2026-03-04 01:04:13 +03:00
Author
Owner

@maxiride commented on GitHub (Aug 10, 2020):

Possible duplicate of #192

<!-- gh-comment-id:671204616 --> @maxiride commented on GitHub (Aug 10, 2020): Possible duplicate of #192
Author
Owner

@rivo commented on GitHub (Sep 15, 2020):

Instead of deleting, then reinserting a new DropDown, wouldn't it be better to simply update the existing second drop-down with DropDown.SetOptions()? That way, the order will remain the same.

<!-- gh-comment-id:692672880 --> @rivo commented on GitHub (Sep 15, 2020): Instead of deleting, then reinserting a new `DropDown`, wouldn't it be better to simply update the existing second drop-down with [`DropDown.SetOptions()`](https://pkg.go.dev/github.com/rivo/tview?tab=doc#DropDown.SetOptions)? That way, the order will remain the same.
Author
Owner

@maxiride commented on GitHub (Sep 16, 2020):

Indeed, it is a smarter way to approach it and can't argue with that.

<!-- gh-comment-id:693200467 --> @maxiride commented on GitHub (Sep 16, 2020): Indeed, it is a smarter way to approach it and can't argue with that.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/tview#348
No description provided.