Fixed #2171 - Dropdown filter closing issue

primefaces · Jul 7, 2021 · 3dd7e54 · 3dd7e54
1 parent ac63d4e
commit 3dd7e54
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -133,7 +133,6 @@ 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);
@@ -170,7 +169,10 @@ export class Dropdown extends Component {
             return;
         }
 
-        if (!this.isClearClicked(event) && event.target.tagName !== 'INPUT') {
+        if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
+            return;
+        }
+        else if (!this.overlayRef.current || !(this.overlayRef.current && this.overlayRef.current.contains(event.target))) {
             this.focusInput.focus();
 
             if (this.state.overlayVisible) {
@@ -182,10 +184,6 @@ export class Dropdown extends Component {
         }
     }
 
-    onFilterContainerClick(event) {
-        event.stopPropagation();
-    }
-
     onInputFocus(event) {
         event.persist();
 

diff --git a/src/components/dropdown/DropdownPanel.js b/src/components/dropdown/DropdownPanel.js
@@ -121,7 +121,7 @@ class DropdownPanelComponent extends Component {
             const containerClassName = classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon });
             return (
                 <div className="p-dropdown-header">
-                    <div className={containerClassName} onClick={this.onFilterContainerClick}>
+                    <div className={containerClassName}>
                         <input ref={(el) => this.filterInput = el} type="text" autoComplete="off" className="p-dropdown-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
                             onKeyDown={this.props.onFilterInputKeyDown} onChange={this.onFilterInputChange} value={this.props.filterValue} />
                         {clearIcon}