Input component shows input chars appearing and disappearing as user types

[DeviceNut]

It appears background input checkers are sometimes backspacing after the user enters in a char, then it appears again. This happens when typing moderately fast. It sometimes even misses capturing the user input altogether.

This is very disconcerting. Is there some way of affecting this behavior?

[elimintz]

You have two options to alleviate this issue:

1. https://justpy.io/tutorial/input/#the-change-event-and-the-inputonlychange-component
   https://justpy.io/quasar_tutorial/QInput/#qinputchange-and-qinputblur-disabling-the-input-event
2. Set the debounce attribute to 500 or higher (the default is 200).

[DeviceNut]

I'm using Input, not QInput, as I don't like the styling on the later (way too much vertical spacing). The docs don't mention the debounce attribute for this, and it seems to help, actually, to set it down to 50 or so. But I don't understand why it still flickers. Is this JustPy or Quasar?

Also, how do I filter the input? I want to use type=text but filter for numbers and '.' for example, and I don't want to use type=numbers because I don't want the inc/dec arrows since it's a floating point number.

Thanks for your help, and I really love your framework, but it could use more documentation in general, especially what attributes are supported (I have to go searching the source code to see that). But overall great job!

[DeviceNut]

Also, InputChangeOnly deletes the entire entry if a Return isn't hit within the debounce period, is this intended behavior?

[elimintz]

I tried replicating the problem with the program below, but it seems to be working fine for me. Which browser are you using? Sorry for the delayed response, I was out in nature.

I think that you probably don't need to use debounce with InputChangeOnly because the events are not frequent.

import justpy as jp


def input_change(self, msg):
    wp = msg.page
    wp.d.text = self.value


def input_test():
    wp = jp.WebPage()
    jp.InputChangeOnly(a=wp, classes=jp.Styles.input_classes, change=input_change, debounce=500)
    wp.d = jp.Div(text='Text from input will go here', classes='m-1 p-1 text-xl border', a=wp)
    return wp

jp.justpy(input_test)

As for filtering input, if it is not done in the browser, but on the server, then you need to handle every input event. That is why I recommend using QInput. Have you tried using the dense attribute? It may look more appealing to you. You can see the difference by toggling the dense switch here: https://v1.quasar.dev/vue-components/input#standard

[DeviceNut]

I'm using Chrome.

So your example works fine, but not when I use it in a more complicated app. I'll try to minimize the code required to trigger this.

Filtering: I don't understand how I would do this in the browser?

So InputChangeOnly looks fine, but QInput has very strange styling (the blue underline is waaaay below the input field). Is that just Quasar, or JustPy?

[elimintz]

The JustPy QInput component is a wrapper around the Quasar QInput component that does the filtering in the browser. To do it in the browser, you would need to write your own advanced component (https://justpy.io/tutorial/advanced_components/)

Please take a look at https://v1.quasar.dev/vue-components/input
There are many examples of QInput. I don't understand exactly what you mean about the blue line. The component is very configurable.

[DeviceNut]

Another urgent question: how do I configure for use with HTTPS?

[DeviceNut]

Sorry, just found config options for that. Disregard this then, unless there are any known issues with using HTTPS with JustPy. Thanks.

[DeviceNut]

I found out what my first issue is: I was running a background task that updates certain fields on a page, while trying to enter values into other fields. Of course the updates overwrite what I'm typing, then re-render correctly, causing a flicker. And for InputChangeOnly it erases the input entirely.

I don't suppose there's any way of targeting the updates? This is a real problem for what I'm trying to do.

[elimintz]

You can update just specific components, not the whole page.
Please see this example: https://justpy.io/tutorial/pushing_data/#simple-message-board

[DeviceNut]

The example adds a new div and that works, but I'm trying to update the text within a div, and that doesn't seem to update, is that right?

[elimintz]

If you could post a small example, I would be happy to take a look.
I suspect you need to add two things:

1. shared_div.add_page(wp) - you need to tell the component which pages it is on
2. When creating the component, use temp=False, this creates an id in the system for the component and is needed to update just the component

[DeviceNut]

Ha! that worked! It needs the "temp" magic else it just renders that component alone. I didn't find any reference to this option in your docs (or source code with a brief search?), so it'd be great if that was added. There seems to be a lot of great features that aren't always obvious from the docs (not complaining, just encouraging).

This solves my issues, thanks so much, and keep up the good work!

[WolfgangFahl]

This looks like multiple issues. Please file separate issues per problem