mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(switch): focus ref in afterUpdate method

Browse source
This commit is contained in:
Eric Liu 2019-12-25 07:17:51 -08:00
commit 52dd244516
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/ContentSwitcher/Switch.svelte
View file

@ -6,8 +6,8 @@
export let disabled = false;
export let style = undefined;
import { afterUpdate, getContext } from 'svelte';
import { cx } from '../../lib';
import { getContext } from 'svelte';
const id = Math.random();
const { currentId, add, update, change } = getContext('ContentSwitcher');
@ -16,10 +16,13 @@
add({ id, text, selected });
afterUpdate(() => {
if (selected) {
buttonRef.focus();
}
});
$: selected = $currentId === id;
$: if (selected && buttonRef) {
buttonRef.focus();
}
</script>
<button
@ -36,10 +39,10 @@
on:mouseenter
on:mouseleave
on:keydown
on:keydown={event => {
if (event.key === 'ArrowRight') {
on:keydown={({ key }) => {
if (key === 'ArrowRight') {
change(1);
} else if (event.key === 'ArrowLeft') {
} else if (key === 'ArrowLeft') {
change(-1);
}
}}