Webview captures Gio keyboard events when used with an editor

[oligo]

Affected plugin
webviewer

Describe the bug

Thank you for making this amazing module! I am integrating the webview into my app, the app has a editor and a previewer implemented using webviewer. One serious issue I found is that the webviewer captures some keyboard events and the Gio editor never have a chance to process those keystroke events.

I tried to install a javascript to intercept the key events, but only some of them are propagated to Gio editor, such as arrow keys, pageUp, pageDown.

Expected behavior

1. The editor should be focused when clicked.
2. When focused the editor should receive all key events.

Reproducible code

package main

import (
	"image"
	"os"
	"sync"

	"gioui.org/app"
	"gioui.org/f32"
	"gioui.org/layout"
	"gioui.org/op"
	"gioui.org/unit"
	"gioui.org/widget"
	"gioui.org/widget/material"
	"github.com/gioui-plugins/gio-plugins/plugin/gioplugins"
	"github.com/gioui-plugins/gio-plugins/webviewer/giowebview"
)

func main() {
	ops := new(op.Ops)
	w := &app.Window{}
	th := material.NewTheme()

	// Editor state
	var editor widget.Editor
	editor.SetText("Type here after clicking on the editor...\n\nNotice that after clicking on the webview (right side), typing here may not work!")

	webviewTag := new(int)
	initialized := false
	var once sync.Once

	// Split position in dp
	splitDp := 300

	go func() {
		for {
			evt := gioplugins.Hijack(w)

			switch evt := evt.(type) {
			case app.DestroyEvent:
				os.Exit(0)
				return
			case app.FrameEvent:
				gtx := app.NewContext(ops, evt)

				splitPx := float32(gtx.Dp(unit.Dp(splitDp)))

				// Layout: split left (editor), right (webview)
				layout.Flex{Axis: layout.Horizontal}.Layout(gtx,
					layout.Rigid(func(gtx layout.Context) layout.Dimensions {
						gtx.Constraints.Max.X = splitDp
						return material.Editor(th, &editor, "Editor").Layout(gtx)
						//return editor.Layout(gtx, th.Shaper)
					}),
					layout.Rigid(func(gtx layout.Context) layout.Dimensions {
						for {
							_, ok := gioplugins.Event(gtx, giowebview.Filter{Target: webviewTag})
							if !ok {
								break
							}
						}

						webviewWidth := gtx.Constraints.Max.X - splitDp
						webviewHeight := gtx.Constraints.Max.Y

						// Push WebViewOp to create the webview instance (processed at frame end)
						defer giowebview.WebViewOp{Tag: webviewTag}.Push(gtx.Ops).Pop(gtx.Ops)

						// Position webview on the right side
						giowebview.OffsetOp{Point: f32.Pt(splitPx, 0)}.Add(gtx.Ops)
						giowebview.RectOp{Size: f32.Pt(float32(webviewWidth), float32(webviewHeight))}.Add(gtx.Ops)

						if initialized {
							once.Do(func() {
								// Webview exists, we can navigate
								gioplugins.Execute(gtx, giowebview.NavigateCmd{
									View: webviewTag,
									URL:  "https://google.com", // replace the page with other pages with no form, you'll get part of the keystrokes work
								})
							})

						} else {
							initialized = true
							gtx.Execute(op.InvalidateCmd{})
						}

						return layout.Dimensions{Size: image.Point{X: webviewWidth, Y: webviewHeight}}
					}),
				)

				evt.Frame(ops)
			}
		}
	}()

	app.Main()
}

To Reproduce
Run the demo code above, then try to type in the editor, the editor can never be focused.

Desktop :

• OS: [MacOS]
• Version [Tahoe 26.2]

[inkeliz]

That is a Gio bug, which I try to patch many times:

• app,io,widget: [android/macos] fix focus issues gioui/gio#138
• app: [macos] improve focus  gioui/gio#93

I think the best solution is adding:

- (BOOL)acceptsFirstResponder {
	return YES;
}

In gio app/os_macos.m. That change is part of a larger change in Gio (https://github.com/gioui/gio/pull/165/changes#diff-2ff7cb60869c35622b8d51b2935044a505e756b7c91e6fafac8fb78cb31da465).

Adding that acceptsFirstResponder seems to work.

[oligo]

Thank you, the code fixed the focus issue! So can we take that method out of your previous change, and send another small patch to Gio?

[inkeliz]

I think it's fine to send a patch.
The PR gioui/gio#165 (which includes that fix) will take some time to land.

---

It's unrelated to the issue. But.... if/when that PR gets merged your code:

// Push WebViewOp to create the webview instance (processed at frame end)
defer giowebview.WebViewOp{Tag: webviewTag}.Push(gtx.Ops).Pop(gtx.Ops)

// Position webview on the right side
giowebview.OffsetOp{Point: f32.Pt(splitPx, 0)}.Add(gtx.Ops)
giowebview.RectOp{Size: f32.Pt(float32(webviewWidth), float32(webviewHeight))}.Add(gtx.Ops)

Needs to change to something like:

// Gio Offset and Rect
defer op.Offset(image.Pt(splitPx, 0)).Push(gtx.Ops).Pop()
defer clip.Rect{Max: image.Pt(webviewWidth, webviewHeight}.Push(gtx.Ops).Pop()

giowebview.WebViewOp{Tag: webviewTag}.Add(gtx.Ops)
paint.PaintOp{}.Add(gtx.Ops) // paint the webview in that area

Instead of that messy giowebview.RectOp/giowebview.OffsetOp it will be possible to use the Gio's Rect/Offset (...). :)

[oligo]

Thank you for your work! I'm looking forward to see it to be accepted.