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

Merge pull request #173 from mfeitoza/master

Browse source 
fix(modal): focus
This commit is contained in:
Eric Liu 2020-05-03 16:46:59 -07:00 • committed by GitHub
commit e8b5bbc82c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/ComposedModal/ComposedModal.svelte
View file

@ -17,6 +17,8 @@
let outerModal = undefined; let outerModal = undefined;
let innerModal = undefined; let innerModal = undefined;
let opened = false;
setContext('ComposedModal', { setContext('ComposedModal', {
closeModal: () => { closeModal: () => {
open = false; open = false;
@ -45,11 +47,15 @@
}); });
afterUpdate(() => { afterUpdate(() => {
if (open) { if (opened) {
dispatch('open'); if (!open) {
document.body.classList.add(cx('--body--with-modal-open')); opened = false;
} else {
dispatch('close'); dispatch('close');
document.body.classList.add(cx('--body--with-modal-open'));
}
} else if (open) {
opened = true;
dispatch('open');
document.body.classList.remove(cx('--body--with-modal-open')); document.body.classList.remove(cx('--body--with-modal-open'));
} }
}); });

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

@ -30,6 +30,8 @@
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;
@ -37,13 +39,17 @@
} }
afterUpdate(() => { afterUpdate(() => {
if (open) { 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'));
} else {
dispatch('close');
document.body.classList.remove(cx('--body--with-modal-open'));
} }
}); });