Pyscript color input - triggers to soon

Question

I'm using this html to have the user choose a color:

<input type="color" id="main-color" name="head" value="#15347d"">

Then I'm using a button to call my python function

button py-click="generate_color_schemes(False)" id="button-submit">Update!</button>

Works well. (generate_color_schemes() examines the Element("main-color").value to get the hex color.)

But I'd like to combine the two, so clicking on the input - opens a picker and fires the python function as the user clicks inside the color picker as well as when they leave.

But (as expected) adding py-click fires my function when the input is first clicked and not when the color chooser popup closes or as the user clicks inside the color picker.

I think I want pyclick to be triggering on the oninput event as well as the onchange event.

Is there a way to combine the input type='color' with py-click to get this behaviour ?

Answer 1

As you say, you've got the right syntax but the wrong event(s). Rather than listening for the click event, you can listen to the input event (which is dispatched every time the value of an input changes) or the change event (which is dispatched, in this case, when the color picker closes). To do this in PyScript (or to listen to any event), the HTML attribute is py-[event] where [event] is the type of the event. In this case, you'll use the py-input and py-change attributes.

Here's a working example in the current release of PyScript (2023.03.1), which I mention in case the events API changes in the future. The MDN docs have a longer example in JavaScript.

<!-- Written for PyScript 2023.03.1 -->
<input type="color" id="main-color" py-input="do_something_with_color()" py-change="do_something_else()">

<py-script>
    import js
    def do_something_with_color():
        elem = js.document.getElementById("main-color")
        value = elem.value
        print(f'Chosen color: {value}') # do something here

    def do_something_else():
        elem = js.document.getElementById("main-color")
        value = elem.value
        print(f'The final color chosen was: {value}') # do something here
</py-script>