From a9ef91b21459a5b3b73faf86020db5559be807df Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Wed, 16 Oct 2019 17:19:30 +0100
Subject: [PATCH] New approach to focus search field

---
 static/js/item.js   | 3 +--
 templates/item.html | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/static/js/item.js b/static/js/item.js
index ddf0cc4..927cda0 100644
--- a/static/js/item.js
+++ b/static/js/item.js
@@ -24,8 +24,7 @@ var app = new Vue({
             this.new_depicts.push(hit);
             this.hits = [];
             this.searchTerms = '';
-            var search_field = document.getElementById('search-field');
-            search_field.focus();
+            this.$refs.search.focus();
         },
         run_search() {
             var terms = this.searchTerms;
diff --git a/templates/item.html b/templates/item.html
index d7829ec..0ba21ea 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -152,7 +152,7 @@ span.description { color: rgb(96, 96, 96); }
 
         <button type="submit" v-if="new_depicts.length" class="btn btn-primary">add these to painting on Wikidata</button>
 
-        <input class="form-control-lg my-2 w-100" autofocus autocomplete="off" v-model.trim="searchTerms" id="search-field" @input="search" />
+        <input class="form-control-lg my-2 w-100" autofocus autocomplete="off" v-model.trim="searchTerms" ref="search" @input="search" />
 
         <div v-if="hits.length" id="item-list">
           <div v-for="hit in hits">