How to preventDefault() in event handlers? about justpy

[elimintz]

You can stop event propagation be setting the event_propagation attribute to false https://justpy.io/reference/htmlcomponent/#event_propagation

I will write more about this later, but for now, some of what you are trying to do can be done this way:

import justpy as jp

input_classes = (
    "m-2 bg-gray-200 border-2 border-gray-200 rounded w-64 py-2 px-4 "
    "text-gray-700 focus:outline-none focus:bg-white focus:border-purple-500"
)
p_classes = "m-2 p-2 h-32 text-xl border-2"


async def input_handler(self, msg):
    print(msg)
    self.div.text = self.value

async def input_demo(request):
    wp = jp.WebPage()
    in1 = jp.Textarea(a=wp, classes=input_classes, placeholder="Please type here", debug=True)
    in1.div = jp.Pre(
        text="What you type will show up here", classes=p_classes, a=wp
    )
    in1.on("input", input_handler)
    return wp

jp.justpy(input_demo)

[rajaravivarma-r]

I tried this code, using input handler works fine. But I am trying to use the Input field like chat input field. Thus upon pressing the Enter key I take the value of the input field and clear it. I hope you get the point.

[elimintz]

To do that, change input_handler to:

async def input_handler(self, msg):
    print(msg)
    self.div.text = self.value
    if self.value[-1]=='\n':
        self.value = ''

[rajaravivarma-r]

I will try it and reply back to you.

[rajaravivarma-r]

I could get it work with Textarea like in the snippet you provided. However, there is no good reason why my example shouldn't work. And it kinda feels hacky to use textarea when an input field should work just fine.

I am NOT saying it should be fixed immediately. But if the architecture design of the whole thing forbids something like this, then it should be addressed as early as possible. Thanks for your time on this.

If you are curios, I tried this little snippet in Vue JS here https://jsfiddle.net/rajaravivarma_r/d38acefy/3/ to see if it is a limitation of Vue JS itself but it works flawlessly.