From 19f473541287456d0b28d413243a897e045be0fb Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sun, 31 May 2020 19:18:49 +0200
Subject: [PATCH] Icon search field now focuses when the menu is opened

---
 app/imports/ui/components/IconSearch.vue      | 79 -------------------
 .../ui/components/global/IconPicker.vue       | 11 +++
 app/imports/ui/icons/IconAdmin.vue            |  5 --
 3 files changed, 11 insertions(+), 84 deletions(-)
 delete mode 100644 app/imports/ui/components/IconSearch.vue

diff --git a/app/imports/ui/components/IconSearch.vue b/app/imports/ui/components/IconSearch.vue
deleted file mode 100644
index 1747df05..00000000
--- a/app/imports/ui/components/IconSearch.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template lang="html">
-	<v-autocomplete
-		v-model="model"
-		:search-input.sync="searchString"
-		:items="items"
-		:loading="!$subReady.searchIcons || isLoading"
-		item-text="name"
-		item-value="_id"
-		label="Search icons"
-		hide-no-data
-		@input="input"
-	>
-		<template
-			slot="item"
-			slot-scope="{ item, tile }"
-		>
-			<v-list-tile-avatar>
-				<svg class="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path :d="item.shape"/></svg>
-			</v-list-tile-avatar>
-			<v-list-tile-content>
-				<v-list-tile-title v-text="item.name"></v-list-tile-title>
-			</v-list-tile-content>
-		</template>
-	</v-autocomplete>
-</template>
-
-<script>
-import Icons from '/imports/api/icons/Icons.js';
-
-export default {
-	data(){ return {
-		model: this.value,
-		searchString: null,
-		serverSearchString: null,
-		isLoading: false,
-	}},
-	props: {
-		value: String,
-	},
-	watch: {
-		searchString(string){
-			this.isLoading = true;
-			this.searchServer(string)
-		},
-		value(newValue){
-			this.model = newValue;
-		},
-	},
-	methods: {
-		searchServer: _.debounce(function(string){
-			this.serverSearchString = string;
-		}, 200),
-		input(e){
-			this.$emit('input', e);
-		}
-	},
-	meteor: {
-		$subscribe: {
-			searchIcons() {
-				this.isLoading = false;
-				return [this.serverSearchString];
-			},
-		},
-		items(){
-			return Icons.find({}, { sort: [['score', 'desc']] }).fetch();
-		},
-	},
-}
-</script>
-
-<style lang="css" scoped>
-	.avatar {
-		width: 100%;
-		height: 100%;
-	}
-	.theme--dark .avatar {
-		fill: white;
-	}
-</style>
diff --git a/app/imports/ui/components/global/IconPicker.vue b/app/imports/ui/components/global/IconPicker.vue
index f525773d..cb3e6b78 100644
--- a/app/imports/ui/components/global/IconPicker.vue
+++ b/app/imports/ui/components/global/IconPicker.vue
@@ -99,6 +99,17 @@ export default {
     searchString: '',
     icons: [],
 	};},
+  watch: {
+    menu(value){
+      if (value){
+        setTimeout(() => {
+          if (this.$refs.iconSearchField){
+            this.$refs.iconSearchField.$children[0].focus();
+          }
+        }, 100);
+      }
+    },
+  },
 	methods: {
     search(value, ack){
       this.searchString = value;
diff --git a/app/imports/ui/icons/IconAdmin.vue b/app/imports/ui/icons/IconAdmin.vue
index 98753810..3e8a58ba 100644
--- a/app/imports/ui/icons/IconAdmin.vue
+++ b/app/imports/ui/icons/IconAdmin.vue
@@ -7,11 +7,6 @@
             column
             align-center
           >
-            <v-icon>$vuetify.icons.abacus</v-icon>
-            <v-input
-              prepend-icon="$vuetify.icons.abacus"
-              label="cat"
-            />
             <upload-btn
               title="Metadata JSON"
               @file-update="metadataFileChanged"