diff --git a/src/lib/components/input/Text.svelte b/src/lib/components/input/Text.svelte index 2c63f6e..09c5ddc 100644 --- a/src/lib/components/input/Text.svelte +++ b/src/lib/components/input/Text.svelte @@ -19,6 +19,8 @@ export let minimal = false; + export let element: HTMLInputElement | undefined = undefined; + const id = randomStr(16); const dispatch = createEventDispatcher<{ input: string; @@ -37,7 +39,7 @@ {disabled} type="text" class="w-full bg-transparent focus:outline-none disabled:cursor-not-allowed" - list={id} + list={options.length > 0 ? id : null} placeholder={$placeholder} on:input={({ currentTarget }) => { dispatch('input', currentTarget.value); @@ -48,6 +50,7 @@ on:focus on:blur bind:value + bind:this={element} /> @@ -71,8 +74,10 @@ - - {#each options as option} - +{#if options.length > 0} + + {#each options as option} + +{/if} diff --git a/src/routes/settings/timetable/+page.svelte b/src/routes/settings/timetable/+page.svelte index 5b2fe2f..25d6010 100644 --- a/src/routes/settings/timetable/+page.svelte +++ b/src/routes/settings/timetable/+page.svelte @@ -22,6 +22,7 @@ import { WEEKDAYS } from '$lib/components/settings/timetable/weekdays'; import BoolSetting from '$lib/components/settings/BoolSetting.svelte'; import { settingsHeader } from '$lib/stores'; + import { asyncRequestAnimationFrame } from '$lib/utils/dom'; const timetable = svocal('settings.timetable'); const weekStartsOn = svocal('settings.weekStartsOn'); @@ -36,6 +37,8 @@ const currentWeekday = WEEKDAYS[new Date().getDay()]; settingsHeader.set(i('settings.timetable.title')); + + let elements: Record = {}; @@ -117,14 +120,20 @@ on:input={({ detail }) => { $timetable[day][lessonIndex] = detail; }} - on:enter={() => { + on:enter={async () => { const isOnlyNull = getLastLessons($timetable).every((x) => x === null); const hasLessons = countMaxLessons($timetable) > 0; + if (!(isOnlyNull && hasLessons)) { + timetable.update(addRow); + await asyncRequestAnimationFrame(); + } - if (!(isOnlyNull && hasLessons)) timetable.update(addRow); + const nextEle = elements[`${lessonIndex + 1}-${ind}`]; + if (!nextEle) return; - // TODO: Focus the TextInput one below + nextEle.focus(); }} + bind:element={elements[`${lessonIndex}-${ind}`]} /> {/if}