From b36a73ddc922a18b0f876f5ee8d3a44be4e5346b Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Fri, 3 Apr 2020 15:15:39 +0300
Subject: [PATCH] Stoppropagation in accordion click event
---
.../components/accordion-container/accordion-container.js | 2 +-
.../collection/components/accordion-item/accordion-item.js | 1 +
src/components/accordion-container/accordion-container.tsx | 2 +-
src/components/accordion-item/accordion-item.tsx | 4 ++--
src/index.html | 7 +++++++
www/index.html | 2 +-
6 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/dist/collection/components/accordion-container/accordion-container.js b/dist/collection/components/accordion-container/accordion-container.js
index c9f08b44..6895cb94 100644
--- a/dist/collection/components/accordion-container/accordion-container.js
+++ b/dist/collection/components/accordion-container/accordion-container.js
@@ -3,7 +3,7 @@ export class AccordionContainer {
render() {
const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
- return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true" },
+ return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" },
h("slot", null)));
}
static get is() { return "hy-accordion-container"; }
diff --git a/dist/collection/components/accordion-item/accordion-item.js b/dist/collection/components/accordion-item/accordion-item.js
index ae7ac717..4a021b5e 100644
--- a/dist/collection/components/accordion-item/accordion-item.js
+++ b/dist/collection/components/accordion-item/accordion-item.js
@@ -57,6 +57,7 @@ export class AccordionItem {
accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
}
event.preventDefault();
+ event.stopImmediatePropagation();
}
});
if (accordion) {
diff --git a/src/components/accordion-container/accordion-container.tsx b/src/components/accordion-container/accordion-container.tsx
index ced0a2e5..18b262bd 100644
--- a/src/components/accordion-container/accordion-container.tsx
+++ b/src/components/accordion-container/accordion-container.tsx
@@ -12,7 +12,7 @@ export class AccordionContainer {
const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
const id = this.accordionid.toLowerCase().replace(/\W/g,'-');
return (
- <div id={id} class={classAttributes.join(" ")} data-allow-multiple="true">
+ <div id={id} class={classAttributes.join(" ")} data-allow-multiple="true" data-allow-toggle="true">
<slot></slot>
</div>
);
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 8fbb57ea..6408ff4b 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -28,7 +28,6 @@ export class AccordionItem {
if (this.ready && containerId.length > 0) {
document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
-
const allowMultiple = accordion.hasAttribute('data-allow-multiple');
const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
@@ -36,7 +35,7 @@ export class AccordionItem {
accordion.addEventListener('click', function (event) {
let target = event.target as HTMLTextAreaElement;
-
+
if (target && target.classList.contains('hy-accordion__button')) {
let targetParent = target.closest('.hy-accordion__item');
let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
@@ -77,6 +76,7 @@ export class AccordionItem {
}
event.preventDefault();
+ event.stopImmediatePropagation();
}
});
diff --git a/src/index.html b/src/index.html
index 1f92f1de..13f055de 100644
--- a/src/index.html
+++ b/src/index.html
@@ -305,6 +305,13 @@
</hy-grid-item>
</hy-grid-row>
</hy-grid-item>
+ <hy-grid-item columns="12">
+ <hy-accordion-container accordionid="example-2">
+ <hy-accordion-item accordiontitle="This is accordion item 1">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ </hy-accordion-item>
+ </hy-accordion-container>
+ </hy-grid-item>
</hy-grid-row>
</hy-grid-container>
</body>
diff --git a/www/index.html b/www/index.html
index 285f166e..eece513c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -40,4 +40,4 @@
elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="right"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="left"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="center"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
- elit.</hy-tiny-text> </hy-grid-item> </hy-grid-row> </hy-grid-item> </hy-grid-row> </hy-grid-container> </body></html>
\ No newline at end of file
+ elit.</hy-tiny-text> </hy-grid-item> </hy-grid-row> </hy-grid-item> <hy-grid-item columns="12"> <hy-accordion-container accordionid="example-2"> <hy-accordion-item accordiontitle="This is accordion item 1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </hy-accordion-item> </hy-accordion-container> </hy-grid-item> </hy-grid-row> </hy-grid-container> </body></html>
\ No newline at end of file
--
GitLab