Compiler support for @oneventname:preventDefault and @oneventname:stopPropagation

[SteveSandersonMS]

I looked into doing this myself, but after talking with @rynowak, it seems likely that we're missing some support in the compiler for having @directiveattribute:param appearing on its own (not alongside @directiveattribute).

The overall summary is:

• For each @oneventname, there's also @oneventname:preventDefault and @oneventname:stopPropagation. These can be used either alongside @oneventname or independently of it.
• They take a boolean expression value, or can appear minimized, which is the same as giving them the value true
• @foo:preventDefault compiles as builder.AddEventPreventDefaultAttribute(sequence, "foo", boolValueExpression). This new method is added here.
• @foo:stopPropagation compiles as builder.AddEventStopPropagationAttribute(sequence, "foo", boolValueExpression). This new method is added here.
• These new method calls can appear among the AddAttribute calls for the element (internally they work by calling into AddAttribute).
• Ideally, these new directive attributes would only be available if you have referenced Microsoft.AspNetCore.Components.Web, since that's where the runtime implementation is, and won't produce compiling code if you haven't referenced that.

Examples:

Minimized preventDefault

<div @onclick:preventDefault>...</div>

Generates:

builder.OpenElement(0, "div");
// ... possibly other attributes here ...
builder.AddEventPreventDefaultAttribute(2, "onclick", true);
// ... possibly other attributes here ...
builder.CloseElement();

Note that you can also have a regular @onclick event handler on the same element, but that's totally independent.

Non-minimized preventDefault

<div @onclick:preventDefault="@someBoolExpression">...</div>

Generates:

builder.OpenElement(0, "div");
// ... possibly other attributes here ...
builder.AddEventPreventDefaultAttribute(2, "onclick", someBoolExpression);
// ... possibly other attributes here ...
builder.CloseElement();

Note that you can also have a regular @onclick event handler on the same element, but that's totally independent.

Minimized stopPropagation

<div @onkeydown:stopPropagation>...</div>

Generates:

builder.OpenElement(0, "div");
// ... possibly other attributes here ...
builder.AddEventStopPropagationAttribute(2, "onkeydown", true);
// ... possibly other attributes here ...
builder.CloseElement();

Note that you can also have a regular @onkeydown event handler on the same element, but that's totally independent.

Non-minimized stopPropagation

<div @onmouseover:stopPropagation="@someBoolExpression">...</div>

Generates:

builder.OpenElement(0, "div");
// ... possibly other attributes here ...
builder.AddEventStopPropagationAttribute(2, "onmouseover", someBoolExpression);
// ... possibly other attributes here ...
builder.CloseElement();

Note that you can also have a regular @onmouseover event handler on the same element, but that's totally independentl

[MarkusRodler]

@SteveSandersonMS I have a question about preventDefault. Is it now possible to preventDefault only for some keys? For example i want to preventDefault on a textfield if the enter key is pressed. In JavaScript I would write it like this:

document.getElementById('div').keypress(function (event) {
    if (event.which === 13) {
        evt.preventDefault();
    }
)};

I hope it is legit to ask that here.

[SteveSandersonMS]

@MarkusRodler For that scenario you would still need to use a JS event handler, since the .NET handlers are async.

[MarkusRodler]

@SteveSandersonMS Thanks for the reply!