Gio directional navigation bug

README.md

Gio directional navigation bug

First, to reproduce the bug you need to force Gio to enable directional navigation on Desktop. This can be done by forcing isMobile to true here.

This test app contains a text input at the top and a grid with clickable cards at the bottom.

If you try navigating with arrows in and out of the text input, you can properly select any cards by going in all 4 directions.

However, if you type something in the text input and then try to navigate into the grid by pressing down arrow, you will notice that up and left arrow no longer work.

Exact steps to reproduce:

1. Run te App.
2. Click into the text input.
3. Write someting, e.g. "test".
4. Click down arrow on the keyboard.
5. Now left/up arrows doesn't work, while right/down still do.

go.mod

module gio-test

go 1.18

require gioui.org v0.0.0-20220916140605-b1dba5f27dd1

require (
	gioui.org/cpu v0.0.0-20220412190645-f1e9e8c3b1f7 // indirect
	gioui.org/shader v1.0.6 // indirect
	github.com/benoitkugler/textlayout v0.1.3 // indirect
	github.com/gioui/uax v0.2.1-0.20220819135011-cda973fac06d // indirect
	github.com/go-text/typesetting v0.0.0-20220919164209-53347960f378 // indirect
	golang.org/x/exp/shiny v0.0.0-20220916125017-b168a2c6b86b // indirect
	golang.org/x/image v0.0.0-20220902085622-e7cb96979f69 // indirect
	golang.org/x/sys v0.0.0-20220919091848-fb04ddd9f9c8 // indirect
	golang.org/x/text v0.3.7 // indirect
)

replace gioui.org => ../gio

main.go

package main

import (
	"fmt"
	"log"
	"os"

	"gioui.org/app"
	"gioui.org/font/gofont"
	"gioui.org/io/system"
	"gioui.org/layout"
	"gioui.org/op"
	"gioui.org/widget"
	"gioui.org/widget/material"
)

func main() {
	go func() {
		err := NewApp().Run()
		if err != nil {
			log.Fatal(err)
		}
		os.Exit(0)
	}()
	app.Main()
}

func NewApp() *App {
	a := &App{
		w: app.NewWindow(
			app.Title("Test"),
			app.Size(800, 600),
		),
		th: material.NewTheme(gofont.Collection()),
	}
	a.query = widget.Editor{
		SingleLine: true,
	}
	for i := range a.cells {
		a.cells[i].Text = fmt.Sprintf("cell %d", i)
	}
	return a
}

type Cell struct {
	Text  string
	click widget.Clickable
}

type App struct {
	w  *app.Window
	th *material.Theme

	query widget.Editor
	cells [9]Cell
}

func (a *App) Run() error {
	var ops op.Ops
	for {
		e := <-a.w.Events()
		switch e := e.(type) {
		case system.DestroyEvent:
			return e.Err
		case system.FrameEvent:
			gtx := layout.NewContext(&ops, e)
			a.Frame(gtx)
			e.Frame(gtx.Ops)
		}
	}
}

func (a *App) Frame(gtx layout.Context) {
	layout.Flex{
		Axis:      layout.Vertical,
		Alignment: layout.Start,
	}.Layout(gtx,
		layout.Rigid(func(gtx layout.Context) layout.Dimensions {
			return widget.Border{
				Color: a.th.Fg, Width: 1,
			}.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
				return material.Editor(a.th, &a.query, "type some text and press 'down' and then 'left' to trigger a bug").Layout(gtx)
			})
		}),
		layout.Flexed(1, a.gridLayout),
	)
}

func (a *App) gridLayout(gtx layout.Context) layout.Dimensions {
	var col []layout.FlexChild
	for i := 0; i < 3; i++ {
		var row []layout.FlexChild
		for j := 0; j < 3; j++ {
			c := &a.cells[3*i+j]
			row = append(row, layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
				return material.Clickable(gtx, &c.click, material.Caption(a.th, c.Text).Layout)
			}))
		}
		col = append(col, layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
			return layout.Flex{Axis: layout.Horizontal}.Layout(gtx, row...)
		}))
	}
	return layout.Flex{Axis: layout.Vertical}.Layout(gtx, col...)
}