Fixed #5141 - Add highlightOnSelect and showTick props to Dropdown

components/lib/dropdown/BaseDropdown.vue

@@ -130,6 +130,14 @@ export default {
             type: Boolean,
             default: true
         },
+        highlightOnSelect: {
+            type: Boolean,
+            default: false
+        },
+        showTick: {
+            type: Boolean,
+            default: true
+        },
         filterMessage: {
             type: String,
             default: null

components/lib/dropdown/Dropdown.d.ts

@@ -143,6 +143,18 @@ export interface DropdownPassThroughOptions<T = any> {
      * Used to pass attributes to the item's DOM element.
      */
     item?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the tick icon's DOM element.
+     */
+    tickIcon?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the bank icon's DOM element.
+     */
+    blankIcon?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
@@ -418,6 +430,16 @@ export interface DropdownProps {
      * @defaultValue true
      */
     focusOnHover?: boolean | undefined;
+    /**
+     *  Highlights automatically the first item.
+     *  @defaultValue false
+     */
+    highlightOnSelect?: boolean | undefined;
+    /**
+     *  Whether the selected option will be shown with a tick.
+     *  @defaultValue true
+     */
+    showTick?: 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'

components/lib/dropdown/Dropdown.vue

@@ -127,7 +127,13 @@
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
                                         >
-                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
+                                            <template v-if="showTick">
+                                                <CheckIcon v-if="isSelected(option)" :class="cx('tickIcon')" v-bind="ptm('tickIcon')" />
+                                                <BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
+                                            </template>
+                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
+                                                <span v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
+                                            </slot>
                                         </li>
                                     </template>
                                     <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
@@ -169,6 +175,8 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import BlankIcon from 'primevue/icons/blank';
+import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import FilterIcon from 'primevue/icons/filter';
 import SpinnerIcon from 'primevue/icons/spinner';
@@ -962,12 +970,14 @@ export default {
         ripple: Ripple
     },
     components: {
-        VirtualScroller: VirtualScroller,
-        Portal: Portal,
-        TimesIcon: TimesIcon,
-        ChevronDownIcon: ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
-        FilterIcon: FilterIcon
+        VirtualScroller,
+        Portal,
+        TimesIcon,
+        ChevronDownIcon,
+        SpinnerIcon,
+        FilterIcon,
+        CheckIcon,
+        BlankIcon
     }
 };
 </script>

components/lib/dropdown/style/DropdownStyle.js

@@ -61,6 +61,8 @@ const css = `
         white-space: nowrap;
         position: relative;
         overflow: hidden;
+        display: flex;
+        align-items: center;
     }
 
     .p-dropdown-item-group {
@@ -134,14 +136,16 @@ const classes = {
     wrapper: 'p-dropdown-items-wrapper',
     list: 'p-dropdown-items',
     itemGroup: 'p-dropdown-item-group',
-    item: ({ instance, state, option, focusedOption }) => [
+    item: ({ instance, props, state, option, focusedOption }) => [
         'p-dropdown-item',
         {
-            'p-highlight': instance.isSelected(option),
+            'p-highlight': instance.isSelected(option) && props.highlightOnSelect,
             'p-focus': state.focusedOptionIndex === focusedOption,
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
+    tickIcon: 'p-dropdown-tick-icon',
+    blankIcon: 'p-dropdown-blank-icon',
     emptyMessage: 'p-dropdown-empty-message'
 };