🐛 Fix bugs in timetable editor

- Turn off autocorrect / spellcheck
- Prevent some browsers from jumping to the start of the text field
- Correctly handle lesson lengths

src/components/lesson-card.vue

@@ -1,23 +1,32 @@
 <script setup>
 import { getSubstitutionColor } from "@/util";
 import { times } from "@/store";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { TrashIcon } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit", "buttons"]);
 const emit = defineEmits(["change", "delete"]);
 
+// Only make the card reactive if not in edit mode
+// to prevent some browsers to jump to the start
+// of the text field on change
+const lesson = ref(props.lesson);
+watch(
+  () => props.lesson,
+  (value) => {
+    if (!props.edit) lesson.value = value;
+  }
+);
+
 const subjectElement = ref();
 const teacherElement = ref();
 const roomElement = ref();
-const lessonLength = ref(props.lesson.length || 1);
 
 function update() {
   emit("change", {
     subject: subjectElement.value.innerText,
     teacher: teacherElement.value.innerText,
     room: roomElement.value.innerText,
-    length: lessonLength.value,
   });
 }
 
@@ -71,6 +80,8 @@ function getTime(index) {
         class="subject"
         v-else
         :contenteditable="edit"
+        autocorrect="false"
+        spellcheck="false"
         data-ph="Subject"
         ref="subjectElement"
         @input="update"
@@ -87,6 +98,8 @@ function getTime(index) {
           class="info"
           v-else
           :contenteditable="edit"
+          autocorrect="false"
+          spellcheck="false"
           data-ph="Teacher"
           ref="teacherElement"
           @input="update"
@@ -101,6 +114,8 @@ function getTime(index) {
           >,
           <span
             :contenteditable="edit"
+            autocorrect="false"
+            spellcheck="false"
             data-ph="Room"
             ref="roomElement"
             @input="update"