Fixed #1215, Fixed #1242

primefaces · Mar 10, 2020 · 129a7b7 · 129a7b7
1 parent cbda8f3
commit 129a7b7
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 11 deletions.
diff --git a/src/components/listbox/ListBox.d.ts b/src/components/listbox/ListBox.d.ts
@@ -15,6 +15,7 @@ interface ListBoxProps {
     multiple?: boolean;
     metaKeySelection?: boolean;
     filter?: boolean;
+    filterPlaceholder?: string;
     tabIndex?:string;
     tooltip?: any;
     tooltipOptions?: TooltipOptions;

diff --git a/src/components/listbox/ListBox.js b/src/components/listbox/ListBox.js
@@ -23,6 +23,7 @@ export class ListBox extends Component {
         multiple: false,
         metaKeySelection: false,
         filter: false,
+        filterPlaceholder: null,
         tabIndex: '0',
         tooltip: null,
         tooltipOptions: null,
@@ -44,6 +45,7 @@ export class ListBox extends Component {
         multiple: PropTypes.bool,
         metaKeySelection: PropTypes.bool,
         filter: PropTypes.bool,
+        filterPlaceholder: PropTypes.string,
         tabIndex: PropTypes.string,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
@@ -278,7 +280,7 @@ export class ListBox extends Component {
         }
 
         if(this.props.filter) {
-            header = <ListBoxHeader filter={this.state.filter} onFilter={this.onFilter} disabled={this.props.disabled} />
+            header = <ListBoxHeader filter={this.state.filter} onFilter={this.onFilter} disabled={this.props.disabled} filterPlaceholder={this.props.filterPlaceholder} />
         }
 
         return (

diff --git a/src/components/listbox/ListBoxHeader.js b/src/components/listbox/ListBoxHeader.js
@@ -6,12 +6,14 @@ export class ListBoxHeader extends Component {
 
     static defaultProps = {
         filter: null,
+        filterPlaceholder: null,
         disabled: false,
         onFilter: null
     }
 
     static propTypes = {
         filter: PropTypes.string,
+        filterPlaceholder: PropTypes.string,
         disabled: PropTypes.bool,
         onFilter: PropTypes.func
     }
@@ -34,7 +36,7 @@ export class ListBoxHeader extends Component {
         return (
                 <div className="p-listbox-header">
                     <div className="p-listbox-filter-container">
-                        <InputText type="text" value={this.props.filter} onChange={this.onFilter} disabled={this.props.disabled} />
+                        <InputText type="text" value={this.props.filter} onChange={this.onFilter} disabled={this.props.disabled} placeholder={this.props.filterPlaceholder} />
                         <span className="p-listbox-filter-icon pi pi-search"></span>
                     </div>
                 </div>

diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -14,6 +14,7 @@ interface MultiSelectProps {
     fixedPlaceholder?: boolean;
     disabled?: boolean;
     filter?: boolean;
+    filterPlaceholder?: string;
     tabIndex?: boolean;
     dataKey?: string;
     appendTo?: HTMLElement;

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -23,6 +23,7 @@ export class MultiSelect extends Component {
         fixedPlaceholder: false,
         disabled: false,
         filter: false,
+        filterPlaceholder: null,
         tabIndex: '0',
         dataKey: null,
         appendTo: null,
@@ -51,6 +52,7 @@ export class MultiSelect extends Component {
         fixedPlaceholder: PropTypes.bool,
         disabled: PropTypes.bool,
         filter: PropTypes.bool,
+        filterPlaceholder: PropTypes.string,
         tabIndex: PropTypes.string,
         dataKey: PropTypes.string,
         appendTo: PropTypes.object,
@@ -458,7 +460,7 @@ export class MultiSelect extends Component {
 
     renderHeader(items) {
         return (
-            <MultiSelectHeader filter={this.props.filter} filterValue={this.state.filter} onFilter={this.onFilter}
+            <MultiSelectHeader filter={this.props.filter} filterValue={this.state.filter} onFilter={this.onFilter} filterPlaceholder={this.props.filterPlaceholder} 
                 onClose={this.onCloseClick} onToggleAll={this.onToggleAll} allChecked={this.isAllChecked(items)} />
         );
     }

diff --git a/src/components/multiselect/MultiSelectHeader.js b/src/components/multiselect/MultiSelectHeader.js
@@ -8,6 +8,7 @@ export class MultiSelectHeader extends Component {
     static defaultProps = {
         filter: false,
         filterValue: null,
+        filterPlaceholder: null,
         onFilter: null,
         onClose: null,
         onToggleAll: null,
@@ -17,6 +18,7 @@ export class MultiSelectHeader extends Component {
     static propTypes = {
         filter: PropTypes.bool,
         filterValue: PropTypes.string,
+        filterPlaceholder: PropTypes.string,
         allChecked: PropTypes.bool,
         onFilter: PropTypes.func,
         onClose: PropTypes.func,
@@ -52,7 +54,7 @@ export class MultiSelectHeader extends Component {
             return (
                 <div className="p-multiselect-filter-container">
                     <InputText type="text" role="textbox" value={this.props.filterValue} onChange={this.onFilter}
-                                className="p-inputtext p-component" />
+                                className="p-inputtext p-component" placeholder={this.props.filterPlaceholder}/>
                     <span className="p-multiselect-filter-icon pi pi-search"></span>
                 </div>
             );

diff --git a/src/showcase/listbox/ListBoxDemo.js b/src/showcase/listbox/ListBoxDemo.js
@@ -69,8 +69,8 @@ export class ListBoxDemo extends Component {
                     <ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} optionLabel="name"/>
 
                     <h3>Advanced</h3>
-                    <ListBox value={this.state.car} filter={true} options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
-                                    style={{width: '15em'}} listStyle={{maxHeight: '250px'}}/>
+                    <ListBox value={this.state.car} filter={true} filterPlaceholder="Search" options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
+                                    style={{width: '15em'}} listStyle={{maxHeight: '250px'}}  />
                 </div>
 
                 <ListboxDoc></ListboxDoc>
@@ -341,6 +341,12 @@ carTemplate(option) {
                             <td>false</td>
                             <td>When specified, displays a filter input at header.</td>
                         </tr>
+                        <tr>
+                            <td>filterPlaceholder</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Placeholder text to show when filter input is empty.</td>
+                        </tr>
                         <tr>
                             <td>tabIndex</td>
                             <td>string</td>
@@ -493,7 +499,7 @@ export class ListBoxDemo extends Component {
                     <ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} optionLabel="name"/>
 
                     <h3>Advanced</h3>
-                    <ListBox value={this.state.car} filter={true} options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
+                    <ListBox value={this.state.car} filter={true} filterPlaceholder="Search" options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
                                     style={{width: '15em'}} listStyle={{maxHeight: '250px'}}/>
                 </div>
             </div>

diff --git a/src/showcase/multiselect/MultiSelectDemo.js b/src/showcase/multiselect/MultiSelectDemo.js
@@ -73,11 +73,11 @@ export class MultiSelectDemo extends Component {
                 <div className="content-section implementation multiselect-demo">
                     <h3>Basic</h3>
                     <MultiSelect value={this.state.cars1} options={cars} onChange={(e) => this.setState({cars1: e.value})}
-                            style={{minWidth:'12em'}} filter={true} placeholder="Choose" />
+                            style={{minWidth:'15em'}} filter={true} filterPlaceholder="Search" placeholder="Choose" />
 
                     <h3>Templating</h3>
                     <MultiSelect value={this.state.cars2} options={cars} onChange={(e) => this.setState({cars2: e.value})}
-                                 style={{minWidth:'12em'}} filter={true} itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
+                                 style={{minWidth:'15em'}} filter={true} filterPlaceholder="Search" itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
                 </div>
 
                 <MultiSelectDoc />
@@ -345,6 +345,12 @@ selectedCarTemplate(option) {
                             <td>true</td>
                             <td>When specified, displays an input field to filter the items on keyup.</td>
                         </tr>
+                        <tr>
+                            <td>filterPlaceholder</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Placeholder text to show when filter input is empty.</td>
+                        </tr>
                         <tr>
                             <td>tabIndex</td>
                             <td>string</td>
@@ -566,11 +572,11 @@ export class MultiSelectDemo extends Component {
                 <div className="content-section implementation multiselect-demo">
                     <h3>Basic</h3>
                     <MultiSelect value={this.state.cars1} options={cars} onChange={(e) => this.setState({cars1: e.value})}
-                            style={{minWidth:'12em'}} filter={true} placeholder="Choose" />
+                            style={{minWidth:'12em'}} filter={true} filterPlaceholder="Search" placeholder="Choose" />
 
                     <h3>Templating</h3>
                     <MultiSelect value={this.state.cars2} options={cars} onChange={(e) => this.setState({cars2: e.value})}
-                                 style={{minWidth:'12em'}} filter={true} itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
+                                 style={{minWidth:'12em'}} filter={true} filterPlaceholder="Search" itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
                 </div>
             </div>
         );