Clean up auto complete demo

src/App.vue

@@ -1,31 +1,8 @@
 <script setup lang="ts">
-import PriceChecker from "./components/PriceChecker.vue";
+import AutoCompleteDemo from "./components/AutoCompleteDemo.vue";
 </script>
 
 <template>
-  <div>
+  <h1>Autocomplete Demo</h1>
-    <a href="https://vitejs.dev" target="_blank">
+  <AutoCompleteDemo />
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-
-  <PriceChecker />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

src/components/AutoCompleteDemo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import AutoCompleteInput from "./Inputs/AutoCompleteInput.vue";
+import { tryFocusByName } from "../utils";
 
 const activityModel = ref([
   { activityCode: "1001", operationCodes: ["00"] },
@@ -34,10 +35,7 @@ const onActivityCodeAutocomplete = () => {
     activityModel.value.find((e) => e.activityCode === activityCode.value)
       ?.operationCodes[0] ?? "";
 
-  const operationCodeInput = document.getElementsByName("operationCodeInput");
+  tryFocusByName("operationCodeInput");
-  if (operationCodeInput.length > 0) {
-    setTimeout(() => operationCodeInput[0].focus(), 1);
-  }
 };
 
 const onOperationCodeChange = (value: string) => {

src/utils.ts

@@ -0,0 +1,6 @@
+export function tryFocusByName(name: string) {
+  const element = document.getElementsByName(name);
+  if (element.length > 0) {
+    setTimeout(() => element[0].focus(), 1);
+  }
+}