TextInput and TextAreaInput js_on_change ENTER difference

Community Support
1

I am trying to get TextAreaInput to callback when the user hits ENTER, which works in a TextInput, but does not in a TextAreaInput. Perhaps because TextAreaInput is multiline that the ENTER doesn’t behave the same way intentionally?

Here is a minimal snippet that demonstrates the issue. After the page loads, open the inspect window and view the console. Type some text in both inputs and hit Enter, only the TextInput triggers the callback.

from bokeh.layouts import layout, column
from bokeh.models.widgets import Div
from bokeh.io import show
from bokeh.models import TextInput, CustomJS, TextAreaInput

ti = TextInput(title="ti")
callback = CustomJS(code="""console.log("hello ti");""")
ti.js_on_change("value", callback)

tia = TextAreaInput(title="tia")
callback = CustomJS(code="""console.log("hello tia");""")
tia.js_on_change("value", callback)

doc_layout = layout()
doc_layout.children.append(column(Div(text="""<h1>Hello World!</h1>""")))
doc_layout.children.append(ti)
doc_layout.children.append(tia)

show(doc_layout)

Okay, wait a minute. If I press TAB (or click outside the box), the callback is triggered. Obviously Enter is handled differently. Still posting this in case it helps somebody else.

2

Hi @Martin_Guthrie It’s impossible to have <enter> trigger a change event on a TextAreaWidget, because text with newlines in it (e.g. separated paragraphs) is a perfectly valid value for users to input. A TextAreaWidget triggers a change when focus leaves it. This could be from hitting <tab> (as you have discovered) or from clicking anywhere outside the widget. From a UX perspective, if I was putting something together with this widget I would maybe have an explicit “Submit” button, and inspect the text widget value on the button callback.

3

Indeed, I agree with you. In my case the text is coming from a barcode reader (and the environment is supposed to be as much hands free (no mouse/keyboard) as possible), and the barcode reader is configured to indicate end of barcode with a \n. I started with TextInput, and then saw the TextAreaInput and given I had multilines, I tried it, and from a GUI perspective I liked it. But then Enter was not working and I didn’t see anything to explain that (in the python code) - so I thought I found a bug.

I went back to TextInput and all is fine now.

1 Like