Aurelia 2 form submit - preventDefault()

vNext
1

Hi,

I have been playing with Aurelia 2 and it seems there might be a regression in regards to summitting forms.

<form role="form" submit.delegate="submit()">

this used to work fine with Aurelia 1 but in aurelia 2 it seems event.preventDefault() is not handled for you and im having to do the following…

html

<form role="form" submit.delegate="submit($event)">

model

async submit(event: Event) : Promise<void> {
    event.preventDefault(); // - don't need to do this in aurelia 1
    ...
}

Am I doing something wrong?

1 Like
2

The behavior you mentioned is intended to be in a compat/quality of life package that should come sometimes. So that we don’t force application to have that behavior if they don’t need to. Even 99% of them need it.

3

@bigopon
Do u know when this quality of life compatibility package will be released?

1 Like
4

In v1, even without the event.preventDefault(), it wouldn’t reload the page as preventDefault() is called by default without true return in the handler. This has been changed in our current v2.

For the QoL package, I’ll add it soon, maybe a day or 2, to sort out what to have initially beside this

5

@milkshakeuk .trigger by default will call preventDefault() like v1, you can use it instead of .delegate

1 Like
6

@bigopon okay but wasn’t it the case that delegate was preferred over trigger in most cases?

3 Likes
7

Yes it is preferred, still is for now. Though I think we may need to re-evaluate this, with shadow DOM in the picture. Everything is working but the trade off between perf and standard compatibility is not easily determined anymore.

2 Likes
8

I could be mistaken but even with this change in v2 it should be fairly straightforward to make this more explicit and easy to follow by adding a simple binding behavior - something like:

export class PreventDefaultBindingBehavior {
    bind(binding, source) {
        binding.standardCallSource = binding.callSource;
        binding.callSource = function (event) {
            this.standardCallSource(event);
            event.preventDefault();
        };
    }

    unbind(binding, source) {
        binding.callSource = binding.standardCallSource;
        binding.standardCallSource = null;
    }
}

then in the template:

<form submit.delegate="myfunction() & preventDefault">
1 Like
9

did the QoL package ever get released? if so what is the package called?

10

@bigopon did you ever get around to the QoL package?

1 Like
11

whudfml

2 Likes
12

We do have the qol but nothing to add yet. Its name is addons. In v2, its quite simpler to do a lot of things so so far no good candidate yet for the QoL addons package.
For the main question jn this thread, we already disable the prevent default by default (will not call preventDefault automatically). It can still be toggled on back, please refer to the doc in event section.