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 @@
-
+{#if options.length > 0}
+
+{/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}