Fixed #1081 - Add showFilterClear proprty to Dropdown

primefaces · Mar 8, 2021 · a488ffb · a488ffb
1 parent 75d0e07
commit a488ffb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
@@ -71,7 +71,8 @@ input.p-dropdown-label  {
     position: relative;
 }
 
-.p-dropdown-filter-icon {
+.p-dropdown-filter-icon,
+.p-dropdown-filter-clear-icon {
     position: absolute;
     top: 50%;
     margin-top: -.5rem;

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -40,6 +40,7 @@ export class Dropdown extends Component {
         autoFocus: false,
         filterInputAutoFocus: true,
         resetFilterOnHide: false,
+        showFilterClear: false,
         panelClassName: null,
         panelStyle: null,
         dataKey: null,
@@ -84,6 +85,7 @@ export class Dropdown extends Component {
         autoFocus: PropTypes.bool,
         filterInputAutoFocus: PropTypes.bool,
         resetFilterOnHide: PropTypes.bool,
+        showFilterClear: PropTypes.bool,
         lazy: PropTypes.bool,
         panelClassName: PropTypes.string,
         panelStyle: PropTypes.object,
@@ -111,6 +113,7 @@ export class Dropdown extends Component {
         };
 
         this.onClick = this.onClick.bind(this);
+        this.onFilterContainerClick = this.onFilterContainerClick.bind(this);
         this.onInputFocus = this.onInputFocus.bind(this);
         this.onInputBlur = this.onInputBlur.bind(this);
         this.onInputKeyDown = this.onInputKeyDown.bind(this);
@@ -125,6 +128,7 @@ export class Dropdown extends Component {
         this.onOverlayEntered = this.onOverlayEntered.bind(this);
         this.onOverlayExit = this.onOverlayExit.bind(this);
         this.onOverlayExited = this.onOverlayExited.bind(this);
+        this.resetFilter = this.resetFilter.bind(this);
         this.clear = this.clear.bind(this);
 
         this.id = this.props.id || UniqueComponentId();
@@ -148,6 +152,10 @@ export class Dropdown extends Component {
         }
     }
 
+    onFilterContainerClick(event) {
+        event.stopPropagation();
+    }
+
     onInputFocus(event) {
         event.persist();
         this.setState({ focused: true }, () => {
@@ -409,8 +417,8 @@ export class Dropdown extends Component {
         this.setState({ filter: event.target.value });
     }
 
-    resetFilter() {
-        this.setState({ filter: '' });
+    resetFilter(callback) {
+        this.setState({ filter: '' }, callback);
     }
 
     clear(event) {
@@ -787,14 +795,25 @@ export class Dropdown extends Component {
         return null;
     }
 
+    renderFilterClearIcon() {
+        if (this.props.showFilterClear && this.state.filter) {
+            return <i className="p-dropdown-filter-clear-icon pi pi-times" onClick={() => this.resetFilter(() => this.filterInput.focus())}></i>
+        }
+
+        return null;
+    }
+
     renderFilter() {
         if (this.props.filter) {
+            const clearIcon = this.renderFilterClearIcon();
+            const containerClassName = classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon });
             return (
                 <div className="p-dropdown-header">
-                    <div className="p-dropdown-filter-container">
+                    <div className={containerClassName} onClick={this.onFilterContainerClick}>
                         <input ref={(el) => this.filterInput = el} type="text" autoComplete="off" className="p-dropdown-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
                             onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} value={this.state.filter} />
-                        <span className="p-dropdown-filter-icon pi pi-search"></span>
+                        {clearIcon}
+                        <i className="p-dropdown-filter-icon pi pi-search"></i>
                     </div>
                 </div>
             );