diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 145866cf4f..4c1fddcf40 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -80,7 +80,8 @@ const valid_modifiers = new Set([ 'capture', 'once', 'passive', - 'self' + 'nonpassive', + 'self', ]); const passive_events = new Set([ diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts index 157e186ea6..b7a6449255 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts @@ -45,12 +45,22 @@ export default class EventHandlerWrapper { const args = []; - const opts = ['passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod)); - if (opts.length) { - args.push((opts.length === 1 && opts[0] === 'capture') - ? TRUE - : x`{ ${opts.map(opt => p`${opt}: true`)} }`); - } else if (block.renderer.options.dev) { + const opts = ['nonpassive', 'passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod)); + if (opts.length) { + let opts_as_string; + if(opts[0] === 'nonpassive'){ + opts.shift(); + if(!opts.includes('passive')){ + opts.push('passive'); + } + opts_as_string = opts.map(opt => p`${opt}: ${opt === 'passive' ? false : true}`); + } + else{ + opts_as_string = opts.map(opt => p`${opt}: true`); + } + args.push((opts.length === 1 && opts[0] === 'capture') ? TRUE : x`{ ${opts_as_string} }`); + } + else if (block.renderer.options.dev) { args.push(FALSE); } diff --git a/test/validator/samples/event-modifiers-invalid/errors.json b/test/validator/samples/event-modifiers-invalid/errors.json index 8be2ca7348..59a142d632 100644 --- a/test/validator/samples/event-modifiers-invalid/errors.json +++ b/test/validator/samples/event-modifiers-invalid/errors.json @@ -1,5 +1,5 @@ [{ - "message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive or self", + "message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive, nonpassive or self", "code": "invalid-event-modifier", "start": { "line": 1,