primevue 3.46.0 → 3.47.0

package/multiselect/MultiSelect.d.ts

@@ -145,10 +145,6 @@ export interface MultiSelectPassThroughOptions {
      * Used to pass attributes to the header's DOM element.
      */
     header?: MultiSelectPassThroughOptionType;
-    /**
-     * Used to pass attributes to the header checkbox container's DOM element.
-     */
-    headerCheckboxContainer?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the header checkbox's DOM element.
      */
@@ -195,17 +191,9 @@ export interface MultiSelectPassThroughOptions {
      */
     item?: MultiSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the checkbox container's DOM element.
-     */
-    checkboxContainer?: MultiSelectPassThroughOptionType;
-    /**
-     * Used to pass attributes to the checkbox's DOM element.
+     * Used to pass attributes to the item checkbox's DOM element.
      */
-    checkbox?: MultiSelectPassThroughOptionType;
-    /**
-     * Used to pass attributes to the checkbox icon's DOM element.
-     */
-    checkboxIcon?: MultiSelectPassThroughOptionType;
+    itemCheckbox?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the option's DOM element.
      */
@@ -214,10 +202,6 @@ export interface MultiSelectPassThroughOptions {
      * Used to pass attributes to the emptyMessage's DOM element.
      */
     emptyMessage?: MultiSelectPassThroughOptionType;
-    /**
-     * Used to pass attributes to the hidden input wrapper's DOM element.
-     */
-    hiddenInputWrapper?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the hidden input's DOM element.
      */
@@ -486,7 +470,7 @@ export interface MultiSelectProps {
     virtualScrollerOptions?: VirtualScrollerProps;
     /**
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
-     * @defaultValue true
+     * @defaultValue false
      */
     autoOptionFocus?: boolean | undefined;
     /**
@@ -494,6 +478,16 @@ export interface MultiSelectProps {
      * @defaultValue false
      */
     autoFilterFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
+    /**
+     *  Highlights automatically the first item.
+     *  @defaultValue false
+     */
+    highlightOnSelect?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * @defaultValue '{0} results are available'

package/multiselect/MultiSelect.vue

@@ -68,16 +68,21 @@
                     ></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="(showToggleAll && selectionLimit == null) || filter" :class="cx('header')" v-bind="ptm('header')">
-                        <div v-if="showToggleAll && selectionLimit == null" :class="cx('headerCheckboxContainer')" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
-                            <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-                                <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
-                            </div>
-                            <div :class="cx('headerCheckbox')" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
-                                <slot name="headercheckboxicon" :allSelected="allSelected" :class="cx('headerCheckboxIcon')">
-                                    <component v-show="allSelected" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[cx('headerCheckboxIcon'), { [checkboxIcon]: allSelected }]" v-bind="getHeaderCheckboxPTOptions('headerCheckboxIcon')" />
-                                </slot>
-                            </div>
-                        </div>
+                        <Checkbox
+                            v-if="showToggleAll && selectionLimit == null"
+                            :modelValue="allSelected"
+                            :binary="true"
+                            :disabled="disabled"
+                            :aria-label="toggleAllAriaLabel"
+                            @change="onToggleAll"
+                            :unstyled="unstyled"
+                            :pt="getHeaderCheckboxPTOptions('headerCheckbox')"
+                        >
+                            <template #icon="slotProps">
+                                <component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
+                                <component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox.icon')" />
+                            </template>
+                        </Checkbox>
                         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
                             <input
                                 ref="filterInput"
@@ -135,18 +140,17 @@
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                         >
-                                            <div :class="cx('checkboxContainer')" v-bind="ptm('checkboxContainer')">
-                                                <div :class="cx('checkbox', { option })" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')">
-                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)" :class="cx('checkboxIcon')">
-                                                        <component
-                                                            v-show="isSelected(option)"
-                                                            :is="checkboxIcon ? 'span' : 'CheckIcon'"
-                                                            :class="[cx('checkboxIcon'), { [checkboxIcon]: isSelected(option) }]"
-                                                            v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')"
-                                                        />
-                                                    </slot>
-                                                </div>
-                                            </div>
+                                            <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
+                                                <template #icon="slotProps">
+                                                    <component v-if="$slots.itemcheckboxicon" :is="$slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
+                                                    <component
+                                                        v-else-if="slotProps.checked"
+                                                        :is="checkboxIcon ? 'span' : 'CheckIcon'"
+                                                        :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
+                                                        v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox.icon')"
+                                                    />
+                                                </template>
+                                            </Checkbox>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
                                                 <span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
                                             </slot>
@@ -191,6 +195,7 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import Checkbox from 'primevue/checkbox';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import SearchIcon from 'primevue/icons/search';
@@ -218,13 +223,12 @@ export default {
     searchTimeout: null,
     searchValue: '',
     selectOnFocus: false,
-    focusOnHover: false,
     data() {
         return {
             id: this.$attrs.id,
+            clicked: false,
             focused: false,
             focusedOptionIndex: -1,
-            headerCheckboxFocused: false,
             filterValue: null,
             overlayVisible: false
         };
@@ -239,7 +243,6 @@ export default {
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -272,8 +275,7 @@ export default {
         getHeaderCheckboxPTOptions(key) {
             return this.ptm(key, {
                 context: {
-                    selected: this.allSelected,
-                    focused: this.headerCheckboxFocused
+                    selected: this.allSelected
                 }
             });
         },
@@ -308,7 +310,7 @@ export default {
         show(isFocus) {
             this.$emit('before-show');
             this.overlayVisible = true;
-            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
 
             isFocus && DomHandler.focus(this.$refs.focusInput);
         },
@@ -316,6 +318,7 @@ export default {
             const _hide = () => {
                 this.$emit('before-hide');
                 this.overlayVisible = false;
+                this.clicked = false;
                 this.focusedOptionIndex = -1;
                 this.searchValue = '';
 
@@ -334,11 +337,16 @@ export default {
             }
 
             this.focused = true;
-            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
-            this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
+
+            if (this.overlayVisible) {
+                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
+                this.scrollInView(this.focusedOptionIndex);
+            }
+
             this.$emit('focus', event);
         },
         onBlur(event) {
+            this.clicked = false;
             this.focused = false;
             this.focusedOptionIndex = -1;
             this.searchValue = '';
@@ -415,6 +423,8 @@ export default {
 
                     break;
             }
+
+            this.clicked = false;
         },
         onContainerClick(event) {
             if (this.disabled || this.loading) {
@@ -424,6 +434,8 @@ export default {
             if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide(true) : this.show(true);
             }
+
+            this.clicked = true;
         },
         onFirstHiddenFocus(event) {
             const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
@@ -438,12 +450,6 @@ export default {
         onCloseClick() {
             this.hide(true);
         },
-        onHeaderCheckboxFocus() {
-            this.headerCheckboxFocused = true;
-        },
-        onHeaderCheckboxBlur() {
-            this.headerCheckboxFocused = false;
-        },
         onOptionSelect(event, option, index = -1, isFocus = false) {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
@@ -553,15 +559,18 @@ export default {
             }
         },
         onArrowDownKey(event) {
-            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();
+            if (!this.overlayVisible) {
+                this.show();
+            } else {
+                const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
 
-            if (event.shiftKey) {
-                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
-            }
+                if (event.shiftKey) {
+                    this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+                }
 
-            this.changeFocusedOptionIndex(event, optionIndex);
+                this.changeFocusedOptionIndex(event, optionIndex);
+            }
 
-            !this.overlayVisible && this.show();
             event.preventDefault();
         },
         onArrowUpKey(event, pressedInInputText = false) {
@@ -573,7 +582,7 @@ export default {
                 this.overlayVisible && this.hide();
                 event.preventDefault();
             } else {
-                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
+                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
                 if (event.shiftKey) {
                     this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
@@ -644,6 +653,7 @@ export default {
         },
         onEnterKey(event) {
             if (!this.overlayVisible) {
+                this.focusedOptionIndex = -1; // reset
                 this.onArrowDownKey(event);
             } else {
                 if (this.focusedOptionIndex !== -1) {
@@ -788,8 +798,6 @@ export default {
 
                 this.updateModel(event, value);
             }
-
-            this.headerCheckboxFocused = true;
         },
         removeOption(event, optionValue) {
             let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
@@ -803,7 +811,7 @@ export default {
             return DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
         },
         isOptionMatched(option) {
-            return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
+            return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
         },
         isValidOption(option) {
             return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
@@ -811,10 +819,13 @@ export default {
         isValidSelectedOption(option) {
             return this.isValidOption(option) && this.isSelected(option);
         },
+        isEquals(value1, value2) {
+            return ObjectUtils.equals(value1, value2, this.equalityKey);
+        },
         isSelected(option) {
             const optionValue = this.getOptionValue(option);
 
-            return (this.modelValue || []).some((value) => ObjectUtils.equals(value, optionValue, this.equalityKey));
+            return (this.modelValue || []).some((value) => this.isEquals(value, optionValue));
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((option) => this.isValidOption(option));
@@ -832,6 +843,18 @@ export default {
 
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
+        findSelectedOptionIndex() {
+            if (this.hasSelectedOption) {
+                for (let index = this.modelValue.length - 1; index >= 0; index--) {
+                    const value = this.modelValue[index];
+                    const matchedOptionIndex = this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option) && this.isEquals(value, this.getOptionValue(option)));
+
+                    if (matchedOptionIndex > -1) return matchedOptionIndex;
+                }
+            }
+
+            return -1;
+        },
         findFirstSelectedOptionIndex() {
             return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
@@ -864,12 +887,12 @@ export default {
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findFirstFocusedOptionIndex() {
-            const selectedIndex = this.findFirstSelectedOptionIndex();
+            const selectedIndex = this.findSelectedOptionIndex();
 
             return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex() {
-            const selectedIndex = this.findLastSelectedOptionIndex();
+            const selectedIndex = this.findSelectedOptionIndex();
 
             return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
@@ -878,19 +901,21 @@ export default {
 
             let optionIndex = -1;
 
-            if (this.focusedOptionIndex !== -1) {
-                optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
-                optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
-            } else {
-                optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
-            }
+            if (ObjectUtils.isNotEmpty(this.searchValue)) {
+                if (this.focusedOptionIndex !== -1) {
+                    optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
+                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
+                } else {
+                    optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));
+                }
 
-            if (optionIndex === -1 && this.focusedOptionIndex === -1) {
-                optionIndex = this.findFirstFocusedOptionIndex();
-            }
+                if (optionIndex === -1 && this.focusedOptionIndex === -1) {
+                    optionIndex = this.findFirstFocusedOptionIndex();
+                }
 
-            if (optionIndex !== -1) {
-                this.changeFocusedOptionIndex(event, optionIndex);
+                if (optionIndex !== -1) {
+                    this.changeFocusedOptionIndex(event, optionIndex);
+                }
             }
 
             if (this.searchTimeout) {
@@ -906,17 +931,23 @@ export default {
             if (this.focusedOptionIndex !== index) {
                 this.focusedOptionIndex = index;
                 this.scrollInView();
+
+                if (this.selectOnFocus) {
+                    this.onOptionSelect(event, this.visibleOptions[index]);
+                }
             }
         },
         scrollInView(index = -1) {
-            const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
-            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
-
-            if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            } else if (!this.virtualScrollerDisabled) {
-                this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
-            }
+            this.$nextTick(() => {
+                const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+                const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
+                if (element) {
+                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                } else if (!this.virtualScrollerDisabled) {
+                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
+                }
+            });
         },
         autoUpdateModel() {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
@@ -1061,14 +1092,15 @@ export default {
         ripple: Ripple
     },
     components: {
-        VirtualScroller: VirtualScroller,
-        Portal: Portal,
-        TimesIcon: TimesIcon,
-        SearchIcon: SearchIcon,
-        TimesCircleIcon: TimesCircleIcon,
-        ChevronDownIcon: ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
-        CheckIcon: CheckIcon
+        Checkbox,
+        VirtualScroller,
+        Portal,
+        TimesIcon,
+        SearchIcon,
+        TimesCircleIcon,
+        ChevronDownIcon,
+        SpinnerIcon,
+        CheckIcon
     }
 };
 </script>