Skip to content

Commit 0e4809d

Browse files
author
Ryan A. Johnson
committed
fix(ShadyDOM): prevent shady dom buttons from interacting with Light DOM
Ensure that `<button>` elements in rewritten ShadyDOM markup don't accidentally submit `<form>` elements in LightDOM. * Explicitly set `type="button"` for every button in a ShadowDOM html * This _should_ be enough, but we call `preventDefault()` on click event listeners on the buttons, just to be sure.
1 parent 3617ff9 commit 0e4809d

File tree

3 files changed

+12
-6
lines changed

3 files changed

+12
-6
lines changed

src/helix-ui/elements/HXAccordionPanelElement.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const tagName = 'hx-accordion-panel';
55
const template = document.createElement('template');
66
template.innerHTML = `
77
<style>${shadowStyles}</style>
8-
<button id="toggle" aria-controls="body" aria-expanded="false">
8+
<button type="button" id="toggle" aria-controls="body" aria-expanded="false">
99
<div class="header">
1010
<span class="header__content">
1111
<slot name="header"></slot>
@@ -71,7 +71,9 @@ export class HXAccordionPanelElement extends HXElement {
7171

7272
// PRIVATE METHODS
7373

74-
_onClick () {
74+
_onClick (evt) {
75+
evt.preventDefault();
76+
7577
if (!this.disabled) {
7678
this.open = !this.open;
7779
}

src/helix-ui/elements/HXModalElement.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const template = document.createElement('template');
88
template.innerHTML = `
99
<style>${shadowStyles}</style>
1010
<div id="container">
11-
<button id="close">
11+
<button type="button" id="close">
1212
<hx-icon type="times"></hx-icon>
1313
</button>
1414
<slot></slot>
@@ -53,7 +53,9 @@ export class HXModalElement extends HXElement {
5353
}
5454
}//attributeChangedCallback
5555

56-
_close () {
56+
_close (evt) {
57+
evt.preventDefault();
58+
5759
this.open = false;
5860
}
5961

src/helix-ui/elements/HXSearchElement.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ template.innerHTML = `
88
<style>${shadowStyles}</style>
99
<label id="wrapper">
1010
<input type="text" role="search" id="search" autocomplete="off" />
11-
<button id="clear" hidden aria-label="Clear search">
11+
<button type="button" id="clear" hidden aria-label="Clear search">
1212
<hx-icon type="times"></hx-icon>
1313
</button>
1414
<div id="icon">
@@ -145,7 +145,9 @@ export class HXSearchElement extends HXElement {
145145
}
146146
}
147147

148-
_clearValue () {
148+
_clearValue (evt) {
149+
evt.preventDefault();
150+
149151
this.value = '';
150152

151153
// Emit a 'clear' event to communicate state change.

0 commit comments

Comments
 (0)