Fixed #2525 - empty slot for Autocomplete

primefaces · Jan 9, 2023 · 8bc2c63 · 8bc2c63
1 parent 0ae83cd
commit 8bc2c63
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
@@ -387,11 +387,15 @@ const AutoCompleteSlots = [
     },
     {
         name: 'content',
-        description: 'Custom content for the virtual scroller'
+        description: 'Custom content for the virtual scroller.'
     },
     {
         name: 'loader',
-        description: 'Custom content for the virtual scroller loader items'
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom empty template when there is no data to display.'
     }
 ];
 

diff --git a/components/autocomplete/AutoComplete.d.ts b/components/autocomplete/AutoComplete.d.ts
@@ -381,6 +381,10 @@ export interface AutoCompleteSlots {
          */
         options: any[];
     }) => VNode[];
+    /**
+     * Custom empty template when there is no data to display.
+     */
+    empty: () => VNode[];
 }
 
 export declare type AutoCompleteEmits = {

diff --git a/components/autocomplete/AutoComplete.vue b/components/autocomplete/AutoComplete.vue
@@ -119,6 +119,9 @@
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
+                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
+                                    <slot name="empty">{{ searchResultMessageText }}</slot>
+                                </li>
                             </ul>
                         </template>
                         <template v-if="$slots.loader" v-slot:loader="{ options }">
@@ -323,7 +326,7 @@ export default {
     watch: {
         suggestions() {
             if (this.searching) {
-                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : this.hide();
+                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide();
                 this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
                 this.searching = false;
             }

diff --git a/pages/autocomplete/AutoCompleteDoc.vue b/pages/autocomplete/AutoCompleteDoc.vue
@@ -562,6 +562,10 @@ export default {
                         <td>loader</td>
                         <td>options: Options of the loader items for virtualscroller</td>
                     </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -605,6 +609,10 @@ export default {
                         <td>p-autocomplete-token-label</td>
                         <td>Label of a selected item in multiple mode.</td>
                     </tr>
+                    <tr>
+                        <td>p-autocomplete-empty-message</td>
+                        <td>Container element when there is no suggestion to display.</td>
+                    </tr>
                     <tr>
                         <td>p-overlay-open</td>
                         <td>Container element when overlay is visible.</td>