Fix primefaces#7662: OrderList fix filterPlaceholder

melloware · Jan 30, 2025 · 1241cf9 · 1241cf9
1 parent ec81f40
commit 1241cf9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/components/doc/orderlist/filterdoc.js b/components/doc/orderlist/filterdoc.js
@@ -29,7 +29,7 @@ export function FilterDoc(props) {
 
     const code = {
         basic: `
-<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
@@ -61,7 +61,7 @@ export default function FilterDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
         </div>
     )
 }
@@ -109,7 +109,7 @@ export default function FilterDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
         </div>
     )
 }
@@ -141,7 +141,7 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" />
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products" />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>

diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
@@ -456,35 +456,36 @@ export const OrderList = React.memo(
                     ref={listElementRef}
                     hostName="OrderList"
                     {...props}
-                    focused={focused}
                     ariaLabel={props.ariaLabel}
                     ariaLabelledBy={props.ariaLabelledBy}
-                    value={visibleList}
-                    selection={selectionState}
-                    onItemClick={onItemClick}
-                    onOptionMouseDown={onOptionMouseDown}
-                    focusedOptionId={focusedOptionId}
-                    onListKeyDown={onListKeyDown}
-                    onListFocus={onListFocus}
-                    onListBlur={onListBlur}
-                    onFilterInputChange={onFilterInputChange}
-                    itemTemplate={props.itemTemplate}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    cx={cx}
+                    dataKey={props.dataKey}
+                    dragdrop={props.dragdrop}
                     filter={props.filter}
-                    onFilter={onFilter}
-                    resetFilter={resetFilter}
+                    filterIcon={props.filterIcon}
+                    filterPlaceholder={props.filterPlaceholder}
                     filterTemplate={props.filterTemplate}
+                    focused={focused}
+                    focusedOptionId={focusedOptionId}
                     header={props.header}
-                    parentId={attributeSelectorState}
+                    isUnstyled={isUnstyled}
+                    itemTemplate={props.itemTemplate}
                     listStyle={props.listStyle}
-                    dataKey={props.dataKey}
-                    dragdrop={props.dragdrop}
                     onChange={props.onChange}
-                    tabIndex={props.tabIndex}
-                    filterIcon={props.filterIcon}
-                    isUnstyled={isUnstyled}
+                    onFilter={onFilter}
+                    onFilterInputChange={onFilterInputChange}
+                    onItemClick={onItemClick}
+                    onListBlur={onListBlur}
+                    onListFocus={onListFocus}
+                    onListKeyDown={onListKeyDown}
+                    onOptionMouseDown={onOptionMouseDown}
+                    parentId={attributeSelectorState}
                     ptm={ptm}
-                    cx={cx}
-                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    resetFilter={resetFilter}
+                    selection={selectionState}
+                    tabIndex={props.tabIndex}
+                    value={visibleList}
                 />
             </div>
         );

diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
@@ -255,7 +255,7 @@ export const OrderListSubList = React.memo(
                         value: props.filterValue,
                         onChange: props.onFilter,
                         onKeyDown: onFilterInputKeyDown,
-                        placeholder: props.placeholder,
+                        placeholder: props.filterPlaceholder,
                         className: cx('filterInput')
                     },
                     _ptm('filterInput')