Add more keyboard handling to KeyValue widget

sveltia · Dec 28, 2024 · 3a9e9f5 · 3a9e9f5
1 parent e3eb3b8
commit 3a9e9f5
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte b/src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte
@@ -169,32 +169,41 @@
     <tbody>
       {#each pairs as pair, index}
         <tr bind:this={rowElements[index]}>
-          <td>
+          <td class="key">
             <TextInput
               {readonly}
               flex
               bind:value={pair[0]}
               invalid={!!validations[index]}
+              aria-label={keyLabel}
               aria-errormessage={validations[index] ? `${fieldId}-kv-error` : undefined}
               oninput={() => {
                 edited[index] = true;
               }}
+              onkeydown={(event) => {
+                // Move focus with Enter key
+                if (event.key === 'Enter' && !event.isComposing) {
+                  /** @type {HTMLInputElement} */ (
+                    rowElements[index].querySelector('td.value input')
+                  )?.focus();
+                }
+              }}
             />
           </td>
-          <td>
+          <td class="value">
             <TextInput
               {readonly}
               flex
               bind:value={pair[1]}
+              aria-label={valueLabel}
               onkeydown={(event) => {
-                // Add new pair with Enter key
-                if (
-                  !event.isComposing &&
-                  event.key === 'Enter' &&
-                  index === pairs.length - 1 &&
-                  pairs.length < max
-                ) {
-                  addPair();
+                // Move focus or add a new pair with Enter key
+                if (event.key === 'Enter' && !event.isComposing) {
+                  if (index < pairs.length - 1) {
+                    rowElements[index + 1].querySelector('input')?.focus();
+                  } else if (pairs.length < max) {
+                    addPair();
+                  }
                 }
               }}
             />