TextInput activates callback upon pressing 'Enter'

Community Support
1

Just a quick question. Is it possible to activate a callback solely by placing the cursor inside a TextInput followed by pressing the ‘Enter’ on the keyboard, without changing the TextInput value? Thanks!

2

No, Bokeh property change events only trigger when the property value changes, and hitting enter in an empty field does not change the value.

3

Thanks!

I meant there is already a default value in the text field, a callback is activated upon the ‘Enter’ key is pressed when the cursor is blinking inside the text field.

4

@thisuser It would help to clarify the exact situation and avoid speculation if you could provide a complete, concrete Minimal Reproducible Example to consider

5

Sorry, my fault. Below please see the minimal example. The timer is expected to start upon the ‘Enter’ key is pressed while the cursor is blinking in the text field of ‘duration in sec’, even if its value has not been changed.

from bokeh.server.server import Server
from bokeh.models import TextInput, Button
from bokeh.layouts import column, row

import time


def make_document(doc):
    def process():
        duration = int(duration_text.value)
        time.sleep(duration)
        status_text.value = 'Time is up'

    def commoncb():
        status_text.value = 'Timer starts'

    def bn_callback(event):
        commoncb()
        doc.add_next_tick_callback(process)

    def text_callback(attr, old, new):
        commoncb()
        doc.add_next_tick_callback(process)

    status_text = TextInput(title='', value='', disabled=True, sizing_mode='stretch_width')
    this_bn = Button(label="Start", button_type="success", sizing_mode='stretch_width')
    this_bn.on_click(bn_callback)

    duration_text = TextInput(title='duration in sec', value='2')
    duration_text.on_change('value', text_callback)

    doc.add_root(column([status_text, this_bn, duration_text]))


apps = {'/': make_document}
server = Server(apps)
server.start()
server.io_loop.add_callback(server.show, "/")
server.io_loop.start()
6

@Bryan Since there was no reply, here is another simpler example if you don’t like the above one, thanks for your help on this matter! :smiley: (I want to activate a callback whenever the Enter is pressed inside the text field)

from bokeh.server.server import Server
from bokeh.models import TextInput, Button
from bokeh.layouts import column, row


def make_document(doc):
    def text_callback(attr, old, new):
        status_text.value = 'Text field Enter button pressed'

    def bn_callback(event):
        status_text.value = 'Reset'

    status_text = TextInput(title='', value='', disabled=True, sizing_mode='stretch_width')

    text_field = TextInput(title='Text field', value='Ready')
    text_field.on_change('value', text_callback)

    reset_bn = Button(label="Reset", button_type="success", sizing_mode='stretch_width')
    reset_bn.on_click(bn_callback)

    doc.add_root(column([status_text, text_field, reset_bn]))


apps = {'/': make_document}
server = Server(apps)
server.start()
server.io_loop.add_callback(server.show, "/")
server.io_loop.start()
7

@thisuser Pease be patient, everyone here is donating time out of their personal free time offer help.

My initial assessment is unchanged. Bokeh on_change events only fire when values change, and no value has changed. The text property value starts as “Ready” and when <enter> is pressed the value is still “Ready”. No value change, therefore no callback.

If you want or need something different to support a specific use-case, you could propose new feature development in a GitHub Issue. The best way to bolster any feature request is to make it thorough, e.g. with proposed code, and considerations of compatibility and minimal footprint, as well as an argument of why it would be of benefit many Bokeh users.

8

Ok, understood, thank you for your time! :smiley:

9

a bit late to the party @thisuser but if you are still working on this another option would be to use some javascript to force an update. something like:

input.dispatchEvent(new Event(‘change’, { bubbles: true }));

// that mimics the behavior of a change for Bokeh and should force an update you just need to attach an event listener to enter to your input (Detect the ENTER key in a text input field with JavaScript)

but you would need to tinker with a bit of JS to wire things up.

1 Like
10

I’m still working on this issue. Thanks very much for your suggestion! :grinning_face_with_smiling_eyes:

1 Like
11

@anx I very much doubt that would work. Bokeh itself actually compares values and if the value is unchanged, will not send websocket events back to the Bokeh server.

12

Good point @Bryan . if it does block it you can easily add to the change event an actual change to force it to send the update and then just remove it on the server side such as appending to the input a space.