mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(modal): fix focus and events

Browse source
This commit is contained in:
Marcus Feitoza 2020-05-03 02:38:40 -03:00
commit f355f52071
1 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/Modal/Modal.svelte
View file

@ -19,7 +19,7 @@
export let size = undefined; export let size = undefined;
export let style = undefined; export let style = undefined;
import { createEventDispatcher, afterUpdate, onDestroy, onMount } from 'svelte'; import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
import Close20 from 'carbon-icons-svelte/lib/Close20'; import Close20 from 'carbon-icons-svelte/lib/Close20';
import { cx } from '../../lib'; import { cx } from '../../lib';
import Button from '../Button'; import Button from '../Button';
@ -30,22 +30,26 @@
let outerModal = undefined; let outerModal = undefined;
let innerModal = undefined; let innerModal = undefined;
let opened = false
// TODO: reuse in ComposedModal // TODO: reuse in ComposedModal
function focus(element) { function focus(element) {
const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef; const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
node.focus(); node.focus();
} }
onMount(() => { afterUpdate(() => {
if (opened) {
if (!open) {
opened = false;
dispatch('close');
document.body.classList.remove(cx('--body--with-modal-open'));
}
} else if (open) {
opened = true;
focus(); focus();
dispatch('open'); dispatch('open');
document.body.classList.add(cx('--body--with-modal-open')); document.body.classList.add(cx('--body--with-modal-open'));
})
afterUpdate(() => {
if (!open) {
dispatch('close');
document.body.classList.remove(cx('--body--with-modal-open'));
} }
}); });