Help With QInput(Change/Blur) removing input

[fx-991ES]

Hi, I've been having an issue with QInput (specifically QInputChange but I have tested and seen the same behaviour with the normal QInput and QInputBlur).

Basically you can type what you want to but as soon as you click out of the input (or it loses focus) the text is removed. The most reliable way I have of reproducing the issue is by doing the following once the example code at the end is running:

1. Inputting something when "single" is selected in the QSelect
2. Switching to "range" and inputting something
3. Switching back to "single" and try inputting something, then taking focus away from QInput, what you have added/changed will disappear

When it happens the following error is thrown:

ERROR base_events: Task exception was never retrieved
future: <Task finished name='Task-29' coro=<handle_event() done, defined at C:\Users\USERNAME\AppData\Local\Programs\Python\Python39\lib\site-packages\justpy-0.2.2-py3.9.egg\justpy\justpy.py:309> exception=KeyError(5)>
Traceback (most recent call last):
  File "C:\Users\USERNAME\AppData\Local\Programs\Python\Python39\lib\site-packages\justpy-0.2.2-py3.9.egg\justpy\justpy.py", line 330, in handle_event
    c = JustpyBaseComponent.instances[event_data['id']]
KeyError: 5

I've not been able to figure out why after searching around for a while, I think though it seems to be linked to the 'change' and 'blur' events that are on the QInput component by default. If I remove those event listeners through my browser developer tools then the problem goes away.

If anyone has had a similar issue, or can point out how I'm doing something wrong (most likely tbh) that'd be really appreciated!

import justpy as jp
from justpy.quasarcomponents import QuasarPage

class capture_param_page(QuasarPage):

    def __init__(self,**kwargs):

        super().__init__(**kwargs)

        self.delete_flag = False # make it so the webpage is not deleted on a refresh/page leave
        self.title = "Capture Dashboard"
        self.capture_active = False

        layout = jp.QLayout(view = "hhh ppp fff",a=self)

        example_param_dict = {'name':'QInput Example', 'type': 'int_free'}
        example_param_id = "example_id"

        # Create integer input parameter field
        int_free_parameter(parameter_dict=example_param_dict,parameter_id=example_param_id,a=layout)

class int_free_parameter(jp.Div):

    def __init__(self,**kwargs):
        self.parameter_dict = None
        self.parameter_id = None

        super().__init__(**kwargs)
        self.classes = "q-py-md"
        self.style = "width: 60%; margin: 0 auto 0 auto;"

        # Get the parameter name
        parameter_name = self.parameter_dict["name"]

        # Create container for the fields
        field_container = jp.Div(a=self,classes="row items-start")

        # Label the parameter
        jp.Div(text=parameter_name,style="margin: auto 0 auto 0",classes="text-subtitle2 q-pr-sm", a=field_container)

        # Create a dropdown select so the user can choose either a fixed number or have a range generated
        self.number_generator_type_select = jp.QSelect(name=f"{self.parameter_id}_select",a=field_container)
        self.number_generator_type_select.value = "Single" # Select single field by default
        self.number_generator_type_select.options = ["Single","Range"]
        self.number_generator_type_select.on("input",self._update_input_type)

        # Create a sub container to hold the fields relevant to the users choice
        self.field_sub_container = jp.Div(a=field_container,classes="row items-start",style="flex-grow: 1;")

        # Pre-generate possible fields for the user input, this is so the user can switch back and forth between single/range without losing their inputs
        self.input_fields = {
            'start' : jp.QInputChange(name=self.parameter_id, classes="q-px-sm", style="width:33.33%;",  stack_label=True, label=f"{parameter_name} [START]", type="number"),
            'end' : jp.QInputChange(name=self.parameter_id, classes="q-px-sm", style="width:33.33%;",  stack_label=True, label=f"{parameter_name} [END]", type="number"),
            'step' : jp.QInputChange(name=self.parameter_id, classes="q-px-sm", style="width:33.33%;",  stack_label=True, label=f"Step Size", type="number"),
            'single' : jp.QInputChange(name=self.parameter_id, classes="q-px-sm", style="width:100%;",  stack_label=True, label=parameter_name, type="number"),
        }

        # Add the single input field by default
        self.field_sub_container.add_component(self.input_fields['single']) # By default set the input mode to single

    async def _update_input_type(self,msg):

        # remove current components
        self.field_sub_container.delete_components()

        # Add the relevant components based on the new user selection
        if self.number_generator_type_select.value == "Single":
            self.field_sub_container.add_component(self.input_fields['single'])

        elif self.number_generator_type_select.value == "Range":
            self.field_sub_container.add_component(self.input_fields['start'])
            self.field_sub_container.add_component(self.input_fields['end'])
            self.field_sub_container.add_component(self.input_fields['step'])

        # Update the page
        await msg.page.update()

@jp.SetRoute('/')
@jp.SetRoute('/capture')
async def capturePage():
    """ Generates and displays the capture page, this allows the user to run a capture script, is accessed through the /capture and root decorators """

    return capture_param_page()

jp.justpy(PLOTLY=True)

[fx-991ES]

Managed to fix the problem, not sure if its the correct way of going about it but it works for me...

TLDR;
swapped:

self.field_sub_container.delete_components()

for

self.field_sub_container.components.clear()

I think the error was related to the components being deleted in the "delete_components" function but then I still had a reference to that component in the "input_fields" dictionary. So when I was re-adding the component after deletion there was something missing (I assume to do with event handling). Given that I don't really want to delete it and have it cleared from memory every time, it is fine for me to simply "remove" the component from the parent so it is not drawn, then re-add it when I want it to be drawn.

[elimintz]

I think your analysis of the problem is correct. delete_components removes all references to the component and its children in the framework so events cannot work on these components.