onClick handler doesn't seem to be working

[yaananth]

I tried

from IPython.display import display
from vdom import div, input_, label, table, tbody, tr, td, button

def on_click(event):
    print("click")
    
def forminput(text, type="text"):
    return tr(
                td(
                    label(text)
                ),
                td(
                    input_(type=type)
                )
            )

view = table(
        tbody(
            forminput("Username:"),
            forminput("Password:", "password"),
            button("Authenticate", onClick=on_click, style={"width":"100", "height": "40"})
        )
    )

#print(view.to_html())
print(view.to_dict())
#print(hash(on_click))
display(view)

{'tagName': 'table', 'attributes': {}, 'children': [{'tagName': 'tbody', 'attributes': {}, 'children': [{'tagName': 'tr', 'attributes': {}, 'children': [{'tagName': 'td', 'attributes': {}, 'children': [{'tagName': 'label', 'attributes': {}, 'children': ['Username:']}]}, {'tagName': 'td', 'attributes': {}, 'children': [{'tagName': 'input', 'attributes': {'type': 'text'}, 'children': []}]}]}, {'tagName': 'tr', 'attributes': {}, 'children': [{'tagName': 'td', 'attributes': {}, 'children': [{'tagName': 'label', 'attributes': {}, 'children': ['Password:']}]}, {'tagName': 'td', 'attributes': {}, 'children': [{'tagName': 'input', 'attributes': {'type': 'password'}, 'children': []}]}]}, {'tagName': 'button', 'attributes': {'style': {'height': '40', 'width': '100'}}, 'eventHandlers': {'onClick': '-9223371929972095102_onClick'}, 'children': ['Authenticate']}]}]}

Clicking on button does nothing, I would expect it to print click

I have these: vdom (0.6) ipython (7.8.0)

What did I miss here?

[yaananth]

much simple example that doesn't work:

def handle_click(event):
    print(event)

el = button('click me', onClick=handle_click)

display(el)
print(el.to_dict())
print(hash(handle_click))

{'tagName': 'button', 'attributes': {}, 'eventHandlers': {'onClick': '-9223371929970225799_onClick'}, 'children': ['click me']}
-9223371929970225799

Shouldn't the onClick hashes match?

[rmorshea]

Not working for me in JupyterLab either. The hash for the onClick handler is correct (as per the spec prior to https://github.com/nteract/vdom/pull/99). My guess is that there's something wrong with the client since event handlers have been a part of VDOM for about a year. @gnestor thoughts?

[gnestor]

@yaananth Calling print after the cell has completed executing won't output anything. That's why the vdom examples make use of ipython's update_display functionality.

We can make your example work by adding:

import sys
from vdom import button

sys.stdout = open('/dev/stdout', 'w')

def handle_click(event):
    print(event)

el = button('click me', onClick=handle_click)

display(el)
print(el.to_dict())
print(hash(handle_click))

That will route the stdout to the terminal (Jupyter server output) so you will see the following when you click the button:

{'altKey': False, 'button': 0, 'buttons': 0, 'clientX': 498, 'clientY': 304, 'ctrlKey': False, 'metaKey': False, 'pageX': 498, 'pageY': 304, 'screenX': 498, 'screenY': 415, 'shiftKey': False}

[yaananth]

@gnestor Interesting, so I tried this

from IPython.display import display, update_display
from vdom import div, input_, label, table, tbody, tr, td, button

def on_click(event):
    target.update("click");
    
def forminput(text, type="text"):
    return tr(
                td(
                    label(text)
                ),
                td(
                    input_(type=type)
                )
            )

view = table(
        tbody(
            forminput("Username:"),
            forminput("Password:", "password"),
            button("Authenticate", onClick=on_click)
        )
    )

#print(view.to_html())
print(view.to_dict())
print(hash(on_click))
target = display(view, display_id=True)
target

did nothing.

I also took that example and did this:

from vdom import button
from IPython.display import display

# Create a variable to store counter state
count = 0

# Define an "on-click" handler
def on_click(event):
    global count
    count += 1
    # Use ipython's `update_display` feature to update the counter's output/display
    counter_display.update(counter())

# Create a function that returns the counter vdom object
# We will use this to render the counter initially and update it when `count` changes
def counter():
    return button(str(count), onClick=on_click, style={'width': "100", 'height': "40"})

# Create a display handle that we can update in the click handler
counter_display = display(counter(), display_id=True)

# Display the counter
counter_display;

As you can see, still did nothing.

I am using nteract (0.14.5)

desktop on windows.

P.S: also tried on azure notebooks beta, which uses nteract, should be linux hosting, didn't work

[gnestor]

Event handling support is currently only available in JupyterLab. I've been meaning to add it to nteract but I haven't had the time to do it. I'm happy to mentor anyone who would like to add it to nteract 👍