From 1fd5964b70d801b32abbf57077ece1dfd8ef71cb Mon Sep 17 00:00:00 2001
From: Yamen Sharaf <YamenSharaf@Gmail.com>
Date: Thu, 14 Feb 2019 14:05:42 +0200
Subject: [PATCH] autocomplete: add highlight-first-item prop (#14269)

---
 examples/components/search.vue             | 3 ++-
 examples/docs/en-US/input.md               | 1 +
 examples/docs/es/input.md                  | 1 +
 examples/docs/zh-CN/input.md               | 1 +
 packages/autocomplete/src/autocomplete.vue | 5 +++++
 5 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/examples/components/search.vue b/examples/components/search.vue
index ab2ce875a..073a7a2d1 100644
--- a/examples/components/search.vue
+++ b/examples/components/search.vue
@@ -6,7 +6,8 @@
     :fetch-suggestions="querySearch"
     :placeholder="placeholder"
     :trigger-on-focus="false"
-    @select="handleSelect">
+    @select="handleSelect"
+    highlight-first-item>
     <template slot-scope="props">
       <p class="algolia-search-title" v-if="props.item.title">
         <span v-html="props.item.highlightedCompo"></span>
diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index b86b6fe1a..0d6ee15c8 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -716,6 +716,7 @@ Attribute | Description | Type | Options | Default
 | suffix-icon | suffix icon class | string | — | — |
 | hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
 | popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
+| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
 
 ### Autocomplete Slots
 
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index f8a968720..44fce15e4 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -705,6 +705,7 @@ Búsqueda de datos desde el servidor.
 | hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
 | popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
 | validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                   | true         |
+| highlight-first-item | si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada                 | boolean                         | -                                                              | false         |
 
 ### Autocomplete Slots
 
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index e7ea5b137..650e5fdbe 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -867,6 +867,7 @@ export default {
 | suffix-icon | 输入框尾部图标 | string | — | — |
 | hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
 | popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
+| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
 
 ### Autocomplete Slots
 | name | 说明 |
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 8cc6172b5..2ce802b05 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -126,6 +126,10 @@
       popperAppendToBody: {
         type: Boolean,
         default: true
+      },
+      highlightFirstItem: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -176,6 +180,7 @@
           }
           if (Array.isArray(suggestions)) {
             this.suggestions = suggestions;
+            this.highlightedIndex = this.highlightFirstItem ? 0 : -1;
           } else {
             console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
           }