responsive: base ok

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -14,6 +14,7 @@ export default {
       template: null,
       typed: null,
       autocomplete: null,
+      $input: null
       // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
     }
   },
@@ -25,7 +26,9 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search submited", this.typed, this.autocomplete);
+      console.log("search submited", this.typed, this.autocomplete)
+      // unfocus the text input to hide the keyboard on mobile device
+      this.$input.blur()
       // New search is triggered by Base.vue with router (which will also fill the store)
       this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
       // this.$router.push({
@@ -52,7 +55,8 @@ export default {
     focus: {
       // directive definition
       inserted: function (el) {
-        el.focus()
+        // do not focus the input as it popup the keyboard on mobile device
+        // el.focus()
       }
     }
   },
@@ -90,11 +94,11 @@ export default {
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);
     // get the search input
-    let $input = this.$el.querySelector('#edit-search')
+    this.$input = this.$el.querySelector('#edit-search')
     // // focus on input
     // $input.focus()
     // Catch the jquery ui events for autocmplete widget
-    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
+    jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
   },
   render(h) {
     // console.log('searchForm render');