Problem with QSelect

[docm64]

quasarcomponents.py in the definition of class QSelect contains the following (line 190):

     self.allowed_events = ['input', 'remove', 'add', 'new_value', 'filter', 'filter_abort', 'focus', 'blur']

I want to use the Quasar 'new-value' event, so I did

    myselect.on('new_value', event_handler)

Unfortunately, no events are received. I was wondering about the '-' vs '_' topic and I guessed that here the underscore is wrong.

I did the following

    myselect.add_event('new-value')
    myselect.on('new-value', event_handler)

The result was a crash in justpy.event_handler() line 306, because 'event_type' was not a known key of event_data. Not what I expected, but it proved that the event was triggered on js side, only event_data was not correctly filled. I checked the quasar_components.js implementation. 'new-value' does not occur in the big switch command starting line 56. Therefore it is mapped on the default handler which appears to be a problem. I added a handler and then I was able to correctly receive the event.

In summary two problems: Underscore topic in the python part and missing event handler in the js part. Didn't check the other events in the allowed_events list apart from 'input' which of course works. Please take a look. 'filter_abort' appears to have the underscore issue as well. Which of the events work well with the default handler, I cannot judge.

[elimintz]

Thank you for this. Will take a look.

[mwx23]

I have the same issue trying to get the filter event to fire on the QSelect component. Thanks to @docm64's tip I added this to the lbig switch statement in quasar_components.js:

                case 'filter':
                    fn = this.filterEvent;
                    break;

and in the methods starting 153 added:

        filterEvent: (function (event) {
            this.eventFunction(event, 'filter');
        }),

Then this just worked

myselect.on('filter', event_handler)

This is the best python web project out there. Keep up the amazing work @elimintz !

[elimintz]

Thank you! Will take another look at the QSelect component and try to incorporate all the events for the next version. What you did with filter is the way to go.

[elimintz]

quasarcomponents.py in the definition of class QSelect contains the following (line 190):

     self.allowed_events = ['input', 'remove', 'add', 'new_value', 'filter', 'filter_abort', 'focus', 'blur']

I want to use the Quasar 'new-value' event, so I did

    myselect.on('new_value', event_handler)

Unfortunately, no events are received. I was wondering about the '-' vs '_' topic and I guessed that here the underscore is wrong.

I did the following

    myselect.add_event('new-value')
    myselect.on('new-value', event_handler)

The result was a crash in justpy.event_handler() line 306, because 'event_type' was not a known key of event_data. Not what I expected, but it proved that the event was triggered on js side, only event_data was not correctly filled. I checked the quasar_components.js implementation. 'new-value' does not occur in the big switch command starting line 56. Therefore it is mapped on the default handler which appears to be a problem. I added a handler and then I was able to correctly receive the event.

In summary two problems: Underscore topic in the python part and missing event handler in the js part. Didn't check the other events in the allowed_events list apart from 'input' which of course works. Please take a look. 'filter_abort' appears to have the underscore issue as well. Which of the events work well with the default handler, I cannot judge.

I'm working on this now. How did you deal is with done() call in the event handler of new-value? Just ignore it? What would be a typical use case for new-value usage?

[othalan]

quasarcomponents.py in the definition of class QSelect contains the following (line 190):

     self.allowed_events = ['input', 'remove', 'add', 'new_value', 'filter', 'filter_abort', 'focus', 'blur']

I want to use the Quasar 'new-value' event, so I did

    myselect.on('new_value', event_handler)

Unfortunately, no events are received. I was wondering about the '-' vs '_' topic and I guessed that here the underscore is wrong. I did the following

    myselect.add_event('new-value')
    myselect.on('new-value', event_handler)

The result was a crash in justpy.event_handler() line 306, because 'event_type' was not a known key of event_data. Not what I expected, but it proved that the event was triggered on js side, only event_data was not correctly filled. I checked the quasar_components.js implementation. 'new-value' does not occur in the big switch command starting line 56. Therefore it is mapped on the default handler which appears to be a problem. I added a handler and then I was able to correctly receive the event. In summary two problems: Underscore topic in the python part and missing event handler in the js part. Didn't check the other events in the allowed_events list apart from 'input' which of course works. Please take a look. 'filter_abort' appears to have the underscore issue as well. Which of the events work well with the default handler, I cannot judge.

I'm working on this now. How did you deal is with done() call in the event handler of new-value? Just ignore it? What would be a typical use case for new-value usage?

I was just attempting to use QSelect, which led me to this issue. My personal use case is to have a list of default values available to control a HighCharts object content, but with the option to type in a new value, the content for which will be downloaded automatically.

The new-value event is used to add new options to the QSelect object. done() must be called to report back to the QSelect object that the new value as been added to the list of options. Here is javascript code with comments from an example in the documentation. The function createValue is the event callback for new-value.

      createValue (val, done) {
        // Calling done(var) when new-value-mode is not set or "add", or done(var, "add") adds "var" content to the model
        // and it resets the input textbox to empty string
        // ----
        // Calling done(var) when new-value-mode is "add-unique", or done(var, "add-unique") adds "var" content to the model
        // only if is not already set
        // and it resets the input textbox to empty string
        // ----
        // Calling done(var) when new-value-mode is "toggle", or done(var, "toggle") toggles the model with "var" content
        // (adds to model if not already in the model, removes from model if already has it)
        // and it resets the input textbox to empty string
        // ----
        // If "var" content is undefined/null, then it doesn't tampers with the model
        // and only resets the input textbox to empty string

        if (val.length > 0) {
          if (!stringOptions.includes(val)) {
            stringOptions.push(val)
          }
          done(val, 'toggle')
        }
      },

[elimintz]

The done function is supported by JustPy for other components. By setting the done attribute to True, the frontend will set run the done function. I'll try adding support for this for the upcoming version.

[WolfgangFahl]

see #685