Refactor #1832 - For AutoComplete

primefaces · Mar 1, 2021 · a06e650 · a06e650
1 parent 7d2f6db
commit a06e650
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
@@ -9,6 +9,7 @@ import { classNames } from '../utils/ClassNames';
 import { tip } from '../tooltip/Tooltip';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import { PrimeEventBus } from '../utils/PrimeEventBus';
 
 export class AutoComplete extends Component {
 
@@ -136,6 +137,7 @@ export class AutoComplete extends Component {
         this.onOverlayEntering = this.onOverlayEntering.bind(this);
         this.onOverlayEntered = this.onOverlayEntered.bind(this);
         this.onOverlayExit = this.onOverlayExit.bind(this);
+        this.onPanelClick = this.onPanelClick.bind(this);
 
         this.id = this.props.id || UniqueComponentId();
         this.listId = this.id + '_list';
@@ -303,6 +305,13 @@ export class AutoComplete extends Component {
         }
     }
 
+    onPanelClick(event) {
+        PrimeEventBus.emit('overlay-click', {
+            originalEvent: event,
+            target: this.container
+        });
+    }
+
     onDropdownClick(event) {
         this.inputEl.focus();
 
@@ -750,7 +759,7 @@ export class AutoComplete extends Component {
                 {dropdown}
                 <AutoCompletePanel ref={this.overlayRef} suggestions={this.props.suggestions} field={this.props.field} listId={this.listId}
                     appendTo={this.props.appendTo} itemTemplate={this.props.itemTemplate} onItemClick={this.selectItem} ariaSelected={this.ariaSelected}
-                    panelStyle={this.props.panelStyle} panelClassName={this.props.panelClassName}
+                    panelStyle={this.props.panelStyle} panelClassName={this.props.panelClassName} onClick={this.onPanelClick}
                     in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntering={this.onOverlayEntering} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} />
             </span>
         );

diff --git a/src/components/autocomplete/AutoCompletePanel.js b/src/components/autocomplete/AutoCompletePanel.js
@@ -19,7 +19,8 @@ class AutoCompletePanelComponent extends Component {
         ariaSelected: null,
         panelClassName: null,
         panelStyle: null,
-        forwardRef: null
+        forwardRef: null,
+        onClick: null
     }
 
     static propTypes = {
@@ -33,7 +34,8 @@ class AutoCompletePanelComponent extends Component {
         ariaSelected: PropTypes.any,
         panelClassName: PropTypes.string,
         panelStyle: PropTypes.object,
-        forwardRef: PropTypes.object
+        forwardRef: PropTypes.object,
+        onClick: PropTypes.func
     };
 
     renderElement() {
@@ -57,7 +59,7 @@ class AutoCompletePanelComponent extends Component {
         return (
             <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }}
                 unmountOnExit onEnter={this.props.onEnter} onEntering={this.props.onEntering} onEntered={this.props.onEntered} onExit={this.props.onExit}>
-                <div ref={this.props.forwardRef} className={panelClassName} style={panelStyle} tabIndex="-1">
+                <div ref={this.props.forwardRef} className={panelClassName} style={panelStyle} onClick={this.props.onClick}>
                     <ul className="p-autocomplete-items" role="listbox" id={this.props.listId}>
                         {items}
                     </ul>