feat(autocomplete): hideOnOptionSelect

api-generator/components/autocomplete.js

@@ -221,6 +221,12 @@ const AutoCompleteProps = [
         default: 'false',
         description: 'When enabled, the focused option is selected.'
     },
+    {
+        name: 'hideOnOptionSelect',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to hide the overlay when an option is selected.'
+    },
     {
         name: 'searchLocale',
         type: 'string',

components/lib/autocomplete/AutoComplete.d.ts

@@ -457,6 +457,11 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Whether to hide the overlay when an option is selected.
+     * @defaultValue true
+     */
+    hideOnOptionSelect?: boolean | undefined;
     /**
      * When enabled, the focus is placed on the hovered option.
      * @defaultValue true

components/lib/autocomplete/AutoComplete.spec.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
 import { nextTick } from 'vue';
 import AutoComplete from './AutoComplete.vue';
+import { describe } from 'vitest';
 
 describe('AutoComplete.vue', () => {
     let wrapper;
@@ -100,4 +101,52 @@ describe('AutoComplete.vue', () => {
             });
         });
     });
+
+    describe('hideOnOptionSelect', () => {
+        it('should hide overlay when hideOnOptionSelect is true', async () => {
+            await wrapper.setProps({
+                hideOnOptionSelect: true
+            });
+
+            const input = await wrapper.find('input');
+
+            await input.setValue('b');
+
+            // @NOTE: Without this delay, the test fails. vm.$nextTick() doesn't help.
+            await new Promise((resolve) => setTimeout(resolve, 300));
+
+            await wrapper.setProps({
+                suggestions: [{ name: 'Bahrain', code: 'BH' }]
+            });
+
+            await wrapper.find('.p-autocomplete-item').trigger('click');
+
+            await new Promise((resolve) => setTimeout(resolve, 5));
+
+            expect(wrapper.find('.p-autocomplete-panel').exists()).toBe(false);
+        });
+
+        it('should keep overlay open when hideOnOptionSelect is false', async () => {
+            await wrapper.setProps({
+                hideOnOptionSelect: false
+            });
+
+            const input = await wrapper.find('input');
+
+            await input.setValue('b');
+
+            // @NOTE: Without this delay, the test fails. vm.$nextTick() doesn't help.
+            await new Promise((resolve) => setTimeout(resolve, 300));
+
+            await wrapper.setProps({
+                suggestions: [{ name: 'Bahrain', code: 'BH' }]
+            });
+
+            await wrapper.find('.p-autocomplete-item').trigger('click');
+
+            await new Promise((resolve) => setTimeout(resolve, 5));
+
+            expect(wrapper.find('.p-autocomplete-panel').exists()).toBe(true);
+        });
+    });
 });

components/lib/autocomplete/AutoComplete.vue

@@ -515,7 +515,9 @@ export default {
 
             this.$emit('item-select', { originalEvent: event, value: option });
 
-            isHide && this.hide(true);
+            if (this.hideOnOptionSelect) {
+                isHide && this.hide(true);
+            }
         },
         onOptionMouseMove(event, index) {
             if (this.focusOnHover) {
@@ -623,7 +625,9 @@ export default {
                     this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
 
-                this.hide();
+                if (this.hideOnOptionSelect) {
+                    this.hide();
+                }
             }
         },
         onEscapeKey(event) {

components/lib/autocomplete/BaseAutoComplete.vue

@@ -141,6 +141,10 @@ export default {
             type: Boolean,
             default: false
         },
+        hideOnOptionSelect: {
+            type: Boolean,
+            default: true
+        },
         focusOnHover: {
             type: Boolean,
             default: true

doc/common/apidoc/index.json

@@ -4184,6 +4184,14 @@
                             "default": "false",
                             "description": "When enabled, the focused option is selected."
                         },
+                        {
+                            "name": "hideOnOptionSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to hide the overlay when an option is selected."
+                        },
                         {
                             "name": "focusOnHover",
                             "optional": true,