fix: search modal scroll issue

- add button outlines
- remove random lifecycle methods
- fix create option name display

src/components/Button.vue

@@ -1,13 +1,6 @@
 <template>
   <button
-    class="
-      focus:outline-none
-      rounded-md
-      flex
-      justify-center
-      items-center
-      text-sm
-    "
+    class="rounded-md flex justify-center items-center text-sm"
     :class="_class"
     v-bind="$attrs"
   >

src/components/Controls/Link.vue

@@ -121,8 +121,8 @@ export default {
             value: () => this.value,
             linkValue: () => this.linkValue,
             isNewValue: () => {
-              let values = this.suggestions.map((d) => d.value);
-              return this.value && !values.includes(this.value);
+              const values = this.suggestions.map((d) => d.label);
+              return this.linkValue && !values.includes(this.linkValue);
             },
           },
           components: { Badge },

src/components/Dialog.vue

@@ -79,12 +79,6 @@ export default defineComponent({
 
     this.focusButton();
   },
-  unmounted() {
-    console.log('unmounted');
-  },
-  deactivated() {
-    console.log('deactivated');
-  },
   methods: {
     focusButton() {
       let button = this.primary?.[0];

src/components/SearchBar.vue

@@ -49,7 +49,7 @@
         <div
           v-for="(si, i) in suggestions"
           :key="`${i}-${si.label}`"
-          ref="suggestions"
+          :data-index="`search-suggestion-${i}`"
           class="hover:bg-gray-50 cursor-pointer"
           :class="idx === i ? 'border-blue-500 bg-gray-50 border-s-4' : ''"
           @click="select(i)"
@@ -332,14 +332,9 @@ export default defineComponent({
       this.close();
     },
     scrollToHighlighted(): void {
-      const suggestionRefs = this.$refs.suggestions;
-      if (!Array.isArray(suggestionRefs)) {
-        return;
-      }
-      const el = suggestionRefs[this.idx];
-      if (el instanceof HTMLElement) {
-        el.scrollIntoView({ block: 'nearest' });
-      }
+      const query = `[data-index="search-suggestion-${this.idx}"]`;
+      const element = document.querySelectorAll(query)?.[0];
+      element?.scrollIntoView({ block: 'nearest' });
     },
     getGroupFilterButtonClass(g: SearchGroup): string {
       if (!this.searcher) {