[IMP] web: custom_hooks: useListener able to pass options to addEventListener

addEventListener supports an `options` argument, which can
be useful to listen on events during the capture phase

This commit allows to pass these options to the hook useListener

closes odoo/odoo#45478

Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

1 files changed, 67 insertions, 0 deletions

diff --git a/addons/web/static/tests/component_extension_tests.js b/addons/web/static/tests/component_extension_tests.js
index f0b33db655c..08f5071ec04 100644
--- a/addons/web/static/tests/component_extension_tests.js
+++ b/addons/web/static/tests/component_extension_tests.js
@@ -181,5 +181,72 @@ odoo.define('web.component_extension_tests', function (require) {
             parent.destroy();
             fixture.classList.remove('custom-class');
         });
+
+        QUnit.test("useListener with capture option", async function (assert) {
+            assert.expect(7);
+            const fixture = document.body.querySelector('#qunit-fixture');
+
+            class Leaf extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', this._onCustom1);
+                }
+                _onCustom1() {
+                    assert.step(`${this.constructor.name} custom1`);
+                }
+            }
+            Leaf.template = xml`<div class="leaf"/>`;
+
+            class Root extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', this._onCustom1, { capture: true });
+                }
+                _onCustom1(event) {
+                    assert.step(`${this.constructor.name} custom1`);
+                    const detail = event.detail;
+                    if (detail && detail.stopMe) {
+                        event.stopPropagation();
+                    }
+                }
+            }
+            Root.template = xml`<div class="root"><Leaf/></div>`;
+            Root.components = { Leaf };
+
+            const root = new Root(null);
+            await root.mount(fixture);
+
+            const rootNode = document.body.querySelector('.root');
+            const leafNode = document.body.querySelector('.leaf');
+            rootNode.dispatchEvent(new CustomEvent('custom1', {
+                bubbles: true,
+                cancelable: true
+            }));
+            assert.verifySteps(['Root custom1']);
+
+            // Dispatch custom1 on the leaf element.
+            // Since we listen in the capture phase, Root is first triggered.
+            // The event is stopped there.
+            leafNode.dispatchEvent(new CustomEvent('custom1', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    stopMe: true
+                },
+            }));
+            assert.verifySteps(['Root custom1']);
+
+            // Same as before, except this time we don't stop the event
+            leafNode.dispatchEvent(new CustomEvent('custom1', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    stopMe: false
+                }
+            }));
+            assert.verifySteps(['Root custom1', 'Leaf custom1']);
+
+            root.destroy();
+        });
     });
 });