ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): fix implicit form submission IE11 due to visibility hidden

Browse source
This commit is contained in:
Joren Broekema 2019-09-23 11:32:00 +02:00
parent 94818e40fb
commit a5752fcb6d
2 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/button/src/LionButton.js
View file

@ -71,7 +71,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
:host .btn ::slotted(button) {
position: absolute;
visibility: hidden;
}
.click-area {
@ -111,6 +110,22 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
fill: #adadad;
}
`,
...(this.__isIE11() /* visibility hidden in IE11 breaks native button functionality */
? [
/* TODO: Make SR-only css mixin? */
css`
:host .btn ::slotted(button) {
clip: rect(0, 0, 0, 0);
}
`,
]
: [
css`
:host .btn ::slotted(button) {
visibility: hidden;
}
`,
]),
];
}
@ -120,7 +135,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
_button: () => {
if (!this.constructor._button) {
this.constructor._button = document.createElement('button');
this.constructor._button.setAttribute('slot', '_button');
this.constructor._button.setAttribute('tabindex', '-1');
}
return this.constructor._button.cloneNode();

14
packages/button/stories/index.stories.js
View file

@ -47,16 +47,4 @@ storiesOf('Buttons|Button', module)
</form></lion-form
>
`,
)
.add('Within another form', () => {
const submitForm = () => console.log('hey');
return html`
<form id="form" @submit=${submitForm}>
<h3>Details</h3>
<input name="input1" />
<input name="input2" />
<input name="input3" />
<lion-button>Submit</lion-button>
</form>
`;
});
);