Input field can not be fully displayed

[zhouke66]

I need multiple input field and switch them with pressing Up or Down key

This code is shown below

package main

import (
	"strconv"

	"github.com/gdamore/tcell"
	"github.com/rivo/tview"
)

func switchNextField(app *tview.Application, inputField [20]tview.Primitive) {
	focusLabel := app.GetFocus().(*tview.InputField).GetLabel()
	focusIndex, _ := strconv.Atoi(focusLabel)

	if focusIndex == 19 {
		focusIndex = 0
	} else {
		focusIndex = focusIndex + 1
	}

	app.SetFocus(inputField[focusIndex])
}

func switchLastField(app *tview.Application, inputField [20]tview.Primitive) {
	focusLabel := app.GetFocus().(*tview.InputField).GetLabel()
	focusIndex, _ := strconv.Atoi(focusLabel)

	if focusIndex == 0 {
		focusIndex = 19
	} else {
		focusIndex = focusIndex - 1
	}

	app.SetFocus(inputField[focusIndex])
}

func main() {
	app := tview.NewApplication()
	var inputField [20]tview.Primitive
	var inputText [20]tview.Primitive

	inputFlex := tview.NewFlex().SetDirection(tview.FlexRow)

	for i := 0; i < 20; i++ {
		inputField[i] = tview.NewInputField().SetLabel(strconv.Itoa(i)).
			SetLabelWidth(15).SetText(strconv.Itoa(i)).SetFieldWidth(30)

		inputText[i] = tview.NewTextView().SetText(strconv.Itoa(i))

		inputFlex.AddItem(inputField[i], 0, 1, true).
			AddItem(inputText[i], 0, 1, true)
	}

	app.SetInputCapture(func(event *tcell.EventKey) *tcell.EventKey {
		if _, ok := app.GetFocus().(*tview.InputField); ok {
			switch event.Key() {
			case tcell.KeyTab, tcell.KeyEnter, tcell.KeyDown:
				switchNextField(app, inputField)
			case tcell.KeyUp:
				switchLastField(app, inputField)
			}
		}

		return event
	})

	flex := tview.NewFlex().SetDirection(tview.FlexRow).
		AddItem(tview.NewBox(), 0, 1, false).AddItem(inputFlex, 0, 1, true).
		AddItem(tview.NewBox(), 0, 1, false)

	if err := app.SetRoot(flex, true).Run(); err != nil {
		panic(err)
	}
}

Run the code, only the last few input field are displayed on the screen.

How to display the focused field when press Up or Down key?
If you have answer and discuss this issue, please tell me. Thanks

[rivo]

You might want to use Grid instead of Flex here. Grid has SetOffset() which allows you to scroll the grid elements.

[zhouke66]

Thanks for your suggestion. According to your suggestion I wrote the following code
package main

import (
	"strconv"

	"github.com/gdamore/tcell"
	"github.com/rivo/tview"
)

func switchNextField(app *tview.Application, inputField [10]tview.Primitive) {
	focusLabel := app.GetFocus().(*tview.InputField).GetLabel()
	focusIndex, _ := strconv.Atoi(focusLabel)

	if focusIndex == 9 {
		focusIndex = 0
	} else {
		focusIndex = focusIndex + 1
	}

	app.SetFocus(inputField[focusIndex])
}

func switchLastField(app *tview.Application, inputField [10]tview.Primitive) {
	focusLabel := app.GetFocus().(*tview.InputField).GetLabel()
	focusIndex, _ := strconv.Atoi(focusLabel)

	if focusIndex == 0 {
		focusIndex = 9
	} else {
		focusIndex = focusIndex - 1
	}

	app.SetFocus(inputField[focusIndex])
}

func main() {
	app := tview.NewApplication()
	var inputField [10]tview.Primitive

	grid := tview.NewGrid().
		SetSize(20, 0, 1, 0).
		SetColumns(0, -3, 0)

	grid.SetBorders(true).SetBackgroundColor(tcell.ColorBlack)

	for i := 0; i < 10; i++ {
		inputField[i] = tview.NewInputField().SetLabel(strconv.Itoa(i)).
			SetLabelWidth(15).SetText(strconv.Itoa(i)).SetFieldWidth(30)

		grid.AddItem(inputField[i], i, 1, 1, 1, 0, 0, true)
	}

	app.SetInputCapture(func(event *tcell.EventKey) *tcell.EventKey {
		if _, ok := app.GetFocus().(*tview.InputField); ok {
			switch event.Key() {
			case tcell.KeyTab, tcell.KeyEnter, tcell.KeyDown:
				switchNextField(app, inputField)
			case tcell.KeyUp:
				switchLastField(app, inputField)
			}
		}

		return event
	})

	flex := tview.NewFlex().SetDirection(tview.FlexRow).
		AddItem(tview.NewBox(), 0, 1, false).AddItem(grid, 0, 1, true).
		AddItem(tview.NewBox(), 0, 1, false)

	if err := app.SetRoot(flex, true).Run(); err != nil {
		panic(err)
	}
}

Run the code, four input field are displayed

But after pressing Down key in the fourth input field, the number of input field be changed to 5.

May I ask why?

[rivo]

I'm sorry but your code doesn't compile. Can you please make it compile first and post it again? I'll have a look then.

[rivo]

If this topic is still relevant, please open a new issue with your answer and reference this one.