[GH-ISSUE #1020] Mouse click on InputField sets Focus to inner TextArea #738

New issue

Closed

opened 2026-03-04 01:07:23 +03:00 by kerem · 4 comments

kerem commented

2026-03-04 01:07:23 +03:00

Owner

Originally created by @IlorDash on GitHub (Sep 1, 2024).
Original GitHub issue: https://github.com/rivo/tview/issues/1020

When using InputField, I've encountered an issue where clicking on the field with the mouse sets the focus to the inner TextArea rather than the InputField itself or its Box. This behavior prevents SetFocusFunc method from being triggered as expected.

Below is the code I am using to create an InputField. For brevity, the header and dialogue setup have been omitted::

panel := tview.NewFlex().SetDirection(tview.FlexRow)
panel.SetBorder(true)

var msg string
message = tview.NewInputField().
	SetPlaceholder("Write a message...").
	SetFieldTextColor(tcell.ColorSilver).
	SetPlaceholderTextColor(tcell.ColorGray).
	SetChangedFunc(func(newMsg string) {
		msg = newMsg
	}).
	SetDoneFunc(func(key tcell.Key) {
		chat, err := client.SendMsg(msg)
		if err != nil {
			appConfig.LogErr(err, "failed to send msg")
			return
		}
		message.SetText("")
	})

message.SetFocusFunc(func() { message.SetPlaceholderTextColor(tcell.ColorSilver) })

panel.AddItem(header.panel, 0, 2, false).
	AddItem(dialogue, 0, 8, false).
	AddItem(message, 0, 1, false)

It seems like issue arises because InputField's MouseHandler calls the TextArea's mouse handler (https://github.com/rivo/tview/blob/master/inputfield.go#L670), resulting in the TextArea gaining focus. To resolve this, I think we need to call to Box.MouseHandler() instead to ensure the InputField.Box.focus is properly triggered on mouse click.

Originally created by @IlorDash on GitHub (Sep 1, 2024). Original GitHub issue: https://github.com/rivo/tview/issues/1020 When using InputField, I've encountered an issue where clicking on the field with the mouse sets the focus to the inner TextArea rather than the InputField itself or its Box. This behavior prevents SetFocusFunc method from being triggered as expected. Below is the code I am using to create an InputField. For brevity, the header and dialogue setup have been omitted:: ``` panel := tview.NewFlex().SetDirection(tview.FlexRow) panel.SetBorder(true) var msg string message = tview.NewInputField(). SetPlaceholder("Write a message..."). SetFieldTextColor(tcell.ColorSilver). SetPlaceholderTextColor(tcell.ColorGray). SetChangedFunc(func(newMsg string) { msg = newMsg }). SetDoneFunc(func(key tcell.Key) { chat, err := client.SendMsg(msg) if err != nil { appConfig.LogErr(err, "failed to send msg") return } message.SetText("") }) message.SetFocusFunc(func() { message.SetPlaceholderTextColor(tcell.ColorSilver) }) panel.AddItem(header.panel, 0, 2, false). AddItem(dialogue, 0, 8, false). AddItem(message, 0, 1, false) ``` It seems like issue arises because InputField's MouseHandler calls the TextArea's mouse handler (https://github.com/rivo/tview/blob/master/inputfield.go#L670), resulting in the TextArea gaining focus. To resolve this, I think we need to call to Box.MouseHandler() instead to ensure the InputField.Box.focus is properly triggered on mouse click.

kerem closed this issue

2026-03-04 01:07:23 +03:00

kerem commented

2026-03-04 01:07:24 +03:00

Author

Owner

@IlorDash commented on GitHub (Sep 8, 2024):

I discovered a bug when calling Box.MouseHandler() instead of textArea.MouseHandler(). The issue occurs when you first click to focus on an InputField, and then try to focus on a different InputField. The first field remains focused because the textArea's Box retains the focus, resulting in any typing still happening in the first InputField. Therefore, this solution doesn't work as intended. Do you have any suggestions on how to resolve this issue?

@IlorDash commented on GitHub (Sep 8, 2024): I discovered a bug when calling Box.MouseHandler() instead of textArea.MouseHandler(). The issue occurs when you first click to focus on an InputField, and then try to focus on a different InputField. The first field remains focused because the textArea's Box retains the focus, resulting in any typing still happening in the first InputField. Therefore, this solution doesn't work as intended. Do you have any suggestions on how to resolve this issue?

kerem commented

2026-03-04 01:07:24 +03:00

Author

Owner

@rivo commented on GitHub (Sep 21, 2024):

The latest commit should fix the issue with the focus callback.

Regarding your second issue, can you please post a brief code snippet that I can run to reproduce it?

@rivo commented on GitHub (Sep 21, 2024): The latest commit should fix the issue with the focus callback. Regarding your second issue, can you please post a brief code snippet that I can run to reproduce it?

kerem commented

2026-03-04 01:07:24 +03:00

Author

Owner

@IlorDash commented on GitHub (Sep 30, 2024):

Thanks, your commit really solved my problem!

To reproduce the second issue, you can use this example code:

package main

import (
	"github.com/gdamore/tcell/v2"
	"github.com/rivo/tview"
)

func main() {
	app := tview.NewApplication()

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

	firstInputField := tview.NewInputField().
		SetPlaceholder("Write a message...").
		SetFieldTextColor(tcell.ColorSilver).
		SetPlaceholderTextColor(tcell.ColorGray).
		SetDoneFunc(func(key tcell.Key) {
			app.Stop()
		})

	firstInputField.SetFocusFunc(func() { firstInputField.SetPlaceholderTextColor(tcell.ColorBlack) })

	secondInputField := tview.NewInputField().
		SetLabel("Enter your name: ").
		SetPlaceholder("E.g. MyName").
		SetFieldWidth(10)

	flex.AddItem(firstInputField, 0, 1, false).
		AddItem(secondInputField, 0, 1, false)

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

You also need to make some changes to the tview package:

Don't use this commit that solved my issue.
Replace i.textArea.MouseHandler() with i.Box.MouseHandler() in tview/inputfiled.go:675.

To be clear, here is the tview version from my go.mod with which I reproduced the issue: v0.0.0-20240921122403-a64fc48d7654. I made my changes to tview, described above, to this version.

To reproduce the issue, follow these steps:

select firstInputField with the mouse;
placeholder text must change to black color;
type something;
select secondInputField with the mouse;
type something;
your typing will occur in firstInputField instead of secondInputField, because the focus remains on the firstInputField's Box.

@IlorDash commented on GitHub (Sep 30, 2024): Thanks, your commit really solved my problem! To reproduce the second issue, you can use this example code: ``` package main import ( "github.com/gdamore/tcell/v2" "github.com/rivo/tview" ) func main() { app := tview.NewApplication() flex := tview.NewFlex().SetDirection(tview.FlexRow) firstInputField := tview.NewInputField(). SetPlaceholder("Write a message..."). SetFieldTextColor(tcell.ColorSilver). SetPlaceholderTextColor(tcell.ColorGray). SetDoneFunc(func(key tcell.Key) { app.Stop() }) firstInputField.SetFocusFunc(func() { firstInputField.SetPlaceholderTextColor(tcell.ColorBlack) }) secondInputField := tview.NewInputField(). SetLabel("Enter your name: "). SetPlaceholder("E.g. MyName"). SetFieldWidth(10) flex.AddItem(firstInputField, 0, 1, false). AddItem(secondInputField, 0, 1, false) if err := app.SetRoot(flex, true).EnableMouse(true).Run(); err != nil { panic(err) } } ``` You also need to make some changes to the `tview` package: 1. Don't use [this commit](https://github.com/rivo/tview/commit/520ccd71f0785637427f78f42e3333eb253bfa7f) that solved my issue. 2. Replace `i.textArea.MouseHandler()` with `i.Box.MouseHandler()` in [tview/inputfiled.go:675](https://github.com/rivo/tview/blob/a64fc48d7654432f71922c8b908280cdb525805c/inputfield.go#L675). To be clear, here is the `tview` version from my `go.mod` with which I reproduced the issue: `v0.0.0-20240921122403-a64fc48d7654`. I made my changes to `tview`, described above, to this version. To reproduce the issue, follow these steps: 1. select `firstInputField` with the mouse; 2. placeholder text must change to black color; 6. type something; 7. select `secondInputField` with the mouse; 8. type something; 9. **your typing will occur in `firstInputField` instead of `secondInputField`, because the focus remains on the `firstInputField's` `Box`.**

kerem commented

2026-03-04 01:07:24 +03:00

Author

Owner

@rivo commented on GitHub (Nov 3, 2024):

This problem doesn't happen for me in the current version, at least not with the steps you listed. So unless you can demonstrate that it still exists in the latest version, I will consider this issue as "resolved".

@rivo commented on GitHub (Nov 3, 2024): This problem doesn't happen for me in the current version, at least not with the steps you listed. So unless you can demonstrate that it still exists in the latest version, I will consider this issue as "resolved".