🔨 Migrate number input to text input

Author: devmount

frontend/src/modals/SongSet.vue

@@ -87,7 +87,8 @@
 					<label class="flex flex-col gap-1">
 						<div>{{ t('field.year') }}</div>
 						<input
-							type="number"
+							type="text"
+							inputmode="numeric"
 							:value="song.year"
 							@input="e => song.year = parseNumberInput((e.target as HTMLInputElement).value)"
 							:placeholder="t('placeholder.exampleSongYear')"
@@ -111,7 +112,8 @@
 							<icon-number class="w-5 h-5 stroke-1.5 mt-0.5" />
 						</div>
 						<input
-							type="number"
+							type="text"
+							inputmode="numeric"
 							:value="song.ccli"
 							@input="e => song.ccli = parseNumberInput((e.target as HTMLInputElement).value)"
 							:placeholder="t('placeholder.exampleSongCcli')"

frontend/src/utils.ts

@@ -299,7 +299,10 @@ const urlify = (s: string): string => {
 }
 
 // parse a number <input>'s raw value, treating an empty field as unset rather than 0
-const parseNumberInput = (value: string): number | undefined => value === '' ? undefined : parseInt(value);
+const parseNumberInput = (value: string): number | undefined => {
+  const trimmed = value.trim();
+  return trimmed === '' ? undefined : parseInt(trimmed);
+};
 
 // sort tag keys by their translated name in the given locale
 const sortTags = (tags: string[], locale: string): string[] => {

frontend/tests/utils.test.ts

@@ -227,6 +227,18 @@ describe('parseNumberInput', () => {
 	it('parses a numeric string', () => {
 		expect(parseNumberInput('42')).toBe(42);
 	});
+
+	it('trims a trailing space before parsing', () => {
+		expect(parseNumberInput('12345 ')).toBe(12345);
+	});
+
+	it('trims a leading space before parsing', () => {
+		expect(parseNumberInput(' 12345')).toBe(12345);
+	});
+
+	it('treats a whitespace-only string as unset', () => {
+		expect(parseNumberInput('   ')).toBeUndefined();
+	});
 });
 
 describe('sortTags', () => {