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

refactor(composed-modal): focus currentTarget in transitionend event

Browse source 
- Dispatch open event
This commit is contained in:
Eric Liu 2019-12-25 13:13:28 -08:00
commit 5e522c399c
1 changed files with 7 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,19 +30,15 @@
} }
}); });
// TODO: reuse in Modal
function focus(element) { function focus(element) {
if (element.querySelector(selectorPrimaryFocus)) { const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
return focusElement.focus(); node.focus();
}
if (buttonRef) {
buttonRef.focus();
}
} }
onMount(async () => { onMount(async () => {
await tick(); await tick();
focus(innerModal); focus();
return () => { return () => {
document.body.classList.remove(cx('--body--with-modal-open')); document.body.classList.remove(cx('--body--with-modal-open'));
@ -50,11 +46,8 @@
}); });
afterUpdate(() => { afterUpdate(() => {
if (!didOpen) {
focus(outerModal);
}
if (open) { if (open) {
dispatch('open');
document.body.classList.add(cx('--body--with-modal-open')); document.body.classList.add(cx('--body--with-modal-open'));
} else { } else {
dispatch('close'); dispatch('close');
@ -80,8 +73,9 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:transitionend on:transitionend
on:transitionend={() => { on:transitionend={({ currentTarget }) => {
if (didOpen) { if (didOpen) {
focus(currentTarget);
didOpen = false; didOpen = false;
} }
}} }}