justpy-org / justpy

An object oriented high-level Python Web Framework that requires no frontend programming
https://justpy.io
Apache License 2.0
1.22k stars 96 forks source link

QEditor 'value' does not update when 'event_propagation=False' #660

Closed fx-991ES closed 1 year ago

fx-991ES commented 1 year ago

When using QEditor if the event_propagation argument is set to False then it is not possible to obtain the value from inside the field.

example code to reproduce:

import justpy as jp

async def add_comment(self, msg):
    print(f"editor: {msg.target.editor}")
    print(f"editor value: '{msg.target.editor.value}'")

@jp.SetRoute('/')
async def page():

    page = jp.QuasarPage()

    editor_options = [['bold', 'italic', 'underline'],['undo', 'redo','fullscreen']]

    editor = jp.QEditor(event_propagation=False, toolbar=editor_options, a=page)

    add_comment_btn = jp.QBtn(text="Add Comment",color="primary",text_color="dark",classes="q-mt-sm",a=page)
    add_comment_btn.editor = editor
    add_comment_btn.on('click',add_comment)

    return page

jp.justpy()

Expected behaviour is that after inputting some text in the editor and pressing the 'Add Comment' button the text that was input should be printed.


Config note: I am using Quasar 1.22.5

fx-991ES commented 1 year ago

Following up with some more info after I did some digging. My analysis of what is happening may be somewhat flawed as I only dabble in js and do not have comprehensive knowledge - but hopefully it is useful for helping to fix the issue.

In quasar_component.js on line 284 (link) event.stopPropagation() is called on the raised 'input' type event which fires when the user types in QEditor.

However the 'event' itself is not an instance of Event and therefore does not have a .stopPropagation() function that can be called. This causes the following error to be thrown and displayed in the console:

TypeError: event.stopPropagation is not a function
    at a.eventFunction (quasar_component.js:284:23)
    at a.inputEvent (quasar_component.js:187:18)
    at dn (vue.js:11:21974)
    at a.r (vue.js:11:10396)
    at dn (vue.js:11:21974)
    at t.$emit (vue.js:11:44375)
    at a.__onInput (quasar.js:6:249086)
    at dn (vue.js:11:21974)
    at HTMLDivElement.r (vue.js:11:10396)
    at i._wrapper (vue.js:11:59525)

I think this means that the rest of the event is not processed and the value not passed to justpy.

WolfgangFahl commented 1 year ago

Thanks for the report - looks like a low hanging fruit then. Tim can you move the issue example to the issues part so that we can check it on http://justpy-demo.bitplan.com

WolfgangFahl commented 1 year ago

see #685