TextInput widget - make event oninput available to user

[dddomodossola]

Actually the oninput event is internally used to manage ENTER key confirmation, this is related to single-line / multiline editing.
We should be able to achieve the same behaviour and expose the event to the user.

[johnperry-math]

I have an ExtendedTextInput widget that implements oninput. I haven't checked to see if it interferes with onchange, but I will try to check that later today. (I think I have to anyway; that's where my application has gotten.)

Even if it does, I've noticed that you have some warnings in places that, IIRC, onkeydown and onchange should not be used at the same time, so even if it does interfere, wouldn't appropriate documentation suffice?

[dddomodossola]

Hello @johnperry-math ,

I will be abroad for 1 week. I'm not sure I will be able to work on this. Please be patient.
In the mean time, may I ask you to make a pull request with the changes above? I will merge it. I think that it's better to not to change the actual class name (It is to say, make changes on the actual TextInput class, do not create a new ExtendedTextInput).

Thank you a lot!

[johnperry-math]

I worked on it a little and noticed something I hadn't noticed before. It looks as if introducing the oninput event does indeed overwrite the default onchange behavior. This makes sense the more I look at it, and I'm not sure why I didn't notice it before, nor how to get around it. I tried to implement the code you use for "Enter", but it requires knowledge of self.single_line, and self doesn't seem to exist in the decorator's context.

The solution for my use case is to use the Input widget with type=text, which I'm already doing for something else, and perhaps that's the smarter thing to do anyway.

[johnperry-math]

Ah, I think I know why I didn't notice before: I was using logging, and I suspect it worked something like this:

• I was using the ExtendedTextInput widget, of course.
• I defined an on_change handler and an oninput handler, which would print or log a message.
• I would run the example / program, which brought the browser to the front of the view.
• I would type in the widget. This would send an oninput event.
• I would Alt+Tab back to the shell, forcing the widget to lose focus, sending an onchange event.
• When I see the shell, I see both log messages, and don't realize how they came at very different times.

[dddomodossola]

Hello @johnperry-math ,

I understand, please post here the complete widget code, I will test it when I will be back home (around 8 February).

Thank you a lot

[johnperry-math]

I made some progress. I've tested it only with single_line so far, but I thought I'd solicit your feedback before proceeding, even if it's only to say "This is completely the wrong approach" 😨

gui.py

Change the javascript assigned to self.attributes[self.EVENT_ONINPUT] as follows:

            self.attributes[self.EVENT_ONINPUT] = """
                var elem = document.getElementById('%(emitter_identifier)s');
                var params = {}; params['new_value']=elem.value;
                %(oninput_behavior)s
                var enter_pressed = (elem.value.indexOf('\\n') > -1);
                if(enter_pressed){
                    elem.value = elem.value.split('\\n').join('');
                    params={};params['new_value']=elem.value;
                    remi.sendCallbackParam('%(emitter_identifier)s','%(event_name)s',params);
                }""" % {
                    'emitter_identifier': str(self.identifier),
                    'event_name': Widget.EVENT_ONCHANGE,
                    'oninput_behavior': "" if only_onchange
                    else f"""
                    console.log('oninput 2: ', {str(self.identifier)});
                    remi.sendCallbackParam('{str(self.identifier)}', '{Widget.EVENT_ONINPUT}', params)
                    """
                }

...then to add an event listener:

    @decorate_set_on_listener("(self, emitter, new_value)")
    @decorate_event
    def oninput(self, new_value):
        return (new_value,)

widgets_overview_app.py

I added a line:

        self.txt.onchange.do(self.on_text_area_change)    # this line already exists
        self.txt.oninput.do(self.on_input)                # this line added

and this method to MyApp:

    def on_input(self, widget, newValue):
        self.lbl.set_text("Text Area input! " + str(random.randint(0, 1000)))

Behavior is as expected when modifying the text area as well as when pressing the enter key.