@diosmosis opened this Pull Request on July 11th 2022 Member

Description:

Fixes #19509

Original problem: some plugins need to prevent an input from changing, like Funnels which needs to prevent a checkbox from changing until the user deals w/ a modal, but Vue will not notice when a model value doesn't change, and won't reset the input value in the case the parent component doesn't update the model value.

Fixes that didn't work:

  • resetting the input value before emitting update:modelValue. This reset the input state to what the modelValue was in case the parent didn't update the modelValue, but changing the input's value reset the text cursor position which makes editing the middle of an input/textarea very annoying.
  • resetting the input after emitting update:modelValue. This ends up always resetting the value because there's no way to know when the emitted event is done being handled, causing a consistent flash/backspace when typing.

This solution (only other one I could come up with):

This PR adds an 'abortable' model modifier that can be used to specify a Field can have it's change aborted. In this case, the event sent to update:modelValue has an abort() function that will reset the input value. This way the input value is only reset if the event handler aborts it, so the text cursor position never changes and there is no weird flash/backspace when typing. It can't really be used like a normal model modifier (ie, v-model.abortable) since it changes the event value, but this functionality is used very rarely in Matomo so I don't think that's much of an issue.

Usage is like:

<Field :uicontrol="text" :model-value="value" :model-modifiers="{abortable:true}" <a class='mention' href='https://github.com/update'>@update</a>:model-value="doUpdate($event)"/>

doUpdate(event: AbortableEvent<string>) {
    if (...) {
        event.abort();
        return;
    }

    this.value = event.value;
}

Review

@sgiehl commented on July 20th 2022 Member

@diosmosis could you maybe send me a link to a PR where that abort modifier is being used? I would like to see that somewhere in action 🙈

@diosmosis commented on July 21st 2022 Member

@sgiehl you can look in pull request 93 in Funnels. The last commit adds it. I tested locally before pushing.

@sgiehl commented on July 21st 2022 Member

@diosmosis Even though the Funnel plugins seems to require the usage of the abort event in some other cases, it seems to work for the one case where you have implemented it. 👍

@diosmosis commented on July 21st 2022 Member

@sgiehl can you let me know on the Funnels pr which places so I can add them there?

This Pull Request was closed on July 21st 2022
Powered by GitHub Issue Mirror