feat(ComposedModal): forward keydown event and add shouldSubmitOnEnter

This commit is contained in:
weaseldotro 2021-03-01 10:54:50 +02:00 committed by GitHub
commit 08076fbefd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -18,6 +18,9 @@
/** Set to `true` to prevent the modal from closing when clicking outside */ /** Set to `true` to prevent the modal from closing when clicking outside */
export let preventCloseOnClickOutside = false; export let preventCloseOnClickOutside = false;
/** Set to `true` for the primary button to be triggered when pressing "Enter" */
export let shouldSubmitOnEnter = true;
/** Specify a class for the inner modal */ /** Specify a class for the inner modal */
export let containerClass = ""; export let containerClass = "";
@ -103,6 +106,16 @@
class:is-visible="{open}" class:is-visible="{open}"
class:bx--modal--danger="{danger}" class:bx--modal--danger="{danger}"
{...$$restProps} {...$$restProps}
on:keydown
on:keydown="{({ key }) => {
if (open) {
if (key === 'Escape') {
open = false;
} else if (shouldSubmitOnEnter && key === 'Enter') {
dispatch('submit');
}
}
}}"
on:click on:click
on:click="{() => { on:click="{() => {
if (!didClickInnerModal && !preventCloseOnClickOutside) open = false; if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;