Refactor #5426 - For Listbox

components/lib/listbox/Listbox.d.ts

@@ -9,8 +9,9 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | string) | string | null | undefined;
@@ -49,6 +50,20 @@ export interface ListboxPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ListboxSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ListboxProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ListboxState;
+}
+
 /**
  * Custom change event.
  * @see {@link ListboxEmits.change}
@@ -97,9 +112,10 @@ export interface ListboxPassThroughOptions {
      */
     filterContainer?: ListboxPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter input's DOM element.
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
      */
-    filterInput?: ListboxPassThroughOptionType;
+    filterInput?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */

components/lib/listbox/Listbox.vue

@@ -14,21 +14,24 @@
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
         <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
             <div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-                <input
-                    ref="filterInput"
+                <LInputText
                     v-model="filterValue"
                     type="text"
                     :class="cx('filterInput')"
                     :placeholder="filterPlaceholder"
                     role="searchbox"
                     autocomplete="off"
+                    :invalid="invalid"
+                    :disabled="disabled"
+                    :unstyled="unstyled"
                     :aria-owns="id + '_list'"
                     :aria-activedescendant="focusedOptionId"
                     :tabindex="!disabled && !focused ? tabindex : -1"
                     @input="onFilterChange"
                     @blur="onFilterBlur"
                     @keydown="onFilterKeyDown"
-                    v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
+                    v-bind="filterInputProps"
+                    :pt="ptm('filterInput')"
                 />
 
                 <slot name="filtericon" :class="cx('filterIcon')">
@@ -124,6 +127,7 @@
 <script>
 import { FilterService } from 'primevue/api';
 import SearchIcon from 'primevue/icons/search';
+import InputText from 'primevue/inputtext';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -733,6 +737,7 @@ export default {
         ripple: Ripple
     },
     components: {
+        LInputText: InputText,
         VirtualScroller: VirtualScroller,
         SearchIcon: SearchIcon
     }

components/lib/listbox/style/ListboxStyle.js

@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ props }) => [
         'p-listbox p-component',
         {
             'p-disabled': props.disabled,
@@ -10,7 +10,7 @@ const classes = {
     ],
     header: 'p-listbox-header',
     filterContainer: 'p-listbox-filter-container',
-    filterInput: 'p-listbox-filter p-inputtext p-component',
+    filterInput: 'p-listbox-filter',
     filterIcon: 'p-listbox-filter-icon',
     wrapper: 'p-listbox-list-wrapper',
     list: 'p-listbox-list',