diff --git a/ts/change-notetype/MapperRow.svelte b/ts/change-notetype/MapperRow.svelte
index 8914b10fa..9afe323ad 100644
--- a/ts/change-notetype/MapperRow.svelte
+++ b/ts/change-notetype/MapperRow.svelte
@@ -5,8 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import Col from "../components/Col.svelte";
     import Row from "../components/Row.svelte";
-    import Select from "../components/Select.svelte";
-    import SelectOption from "../components/SelectOption.svelte";
     import type { ChangeNotetypeState, MapContext } from "./lib";
 
     export let state: ChangeNotetypeState;
@@ -15,20 +13,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const info = state.info;
 
-    let oldIndex = $info.getOldIndex(ctx, newIndex);
-
-    const options = $info.getOldNamesIncludingNothing(ctx);
-    $: state.setOldIndex(ctx, newIndex, oldIndex);
-    $: label = options[oldIndex];
+    function onChange(evt: Event) {
+        const oldIdx = parseInt((evt.target as HTMLSelectElement).value, 10);
+        state.setOldIndex(ctx, newIndex, oldIdx);
+    }
 </script>
 
 <Row --cols={2}>
     <Col --col-size={1}>
-        <Select bind:value={oldIndex} {label}>
-            {#each options as name, idx}
-                <SelectOption value={idx}>{name}</SelectOption>
+        <select
+            value={$info.getOldIndex(ctx, newIndex)}
+            class="form-select"
+            on:change={onChange}
+        >
+            {#each $info.getOldNamesIncludingNothing(ctx) as name, idx}
+                <option value={idx}>{name}</option>
             {/each}
-        </Select>
+        </select>
     </Col>
     <Col --col-size={1}>
         {$info.getNewName(ctx, newIndex)}