Fixed #1801 - Add autoHighlight property to AutoComplete

primefaces · Feb 4, 2021 · 9afbb27 · 9afbb27
1 parent 3520b03
commit 9afbb27
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
@@ -9,6 +9,7 @@ interface AutoCompleteProps {
     suggestions?: any[];
     field?: string;
     forceSelection?: boolean;
+    autoHighlight?: boolean;
     scrollHeight?: string;
     dropdown?: boolean;
     dropdownMode?: string;

diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
@@ -20,6 +20,7 @@ export class AutoComplete extends Component {
         suggestions: null,
         field: null,
         forceSelection: false,
+        autoHighlight: false,
         scrollHeight: '200px',
         dropdown: false,
         dropdownMode: 'blank',
@@ -70,6 +71,7 @@ export class AutoComplete extends Component {
         suggestions: PropTypes.array,
         field: PropTypes.string,
         forceSelection: PropTypes.bool,
+        autoHighlight: PropTypes.bool,
         scrollHeight: PropTypes.string,
         dropdown: PropTypes.bool,
         dropdownMode: PropTypes.string,
@@ -131,6 +133,7 @@ export class AutoComplete extends Component {
         this.onMultiInputBlur = this.onMultiInputBlur.bind(this);
         this.selectItem = this.selectItem.bind(this);
         this.onOverlayEnter = this.onOverlayEnter.bind(this);
+        this.onOverlayEntering = this.onOverlayEntering.bind(this);
         this.onOverlayEntered = this.onOverlayEntered.bind(this);
         this.onOverlayExit = this.onOverlayExit.bind(this);
 
@@ -270,6 +273,12 @@ export class AutoComplete extends Component {
         this.alignOverlay();
     }
 
+    onOverlayEntering() {
+        if (this.props.autoHighlight && this.props.suggestions && this.props.suggestions.length) {
+            DomHandler.addClass(this.overlayRef.current.firstChild.firstChild, 'p-highlight');
+        }
+    }
+
     onOverlayEntered() {
         this.bindDocumentClickListener();
         this.bindScrollListener();
@@ -739,7 +748,7 @@ export class AutoComplete extends Component {
                 <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}
-                    in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} />
+                    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
@@ -56,7 +56,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} onEntered={this.props.onEntered} onExit={this.props.onExit}>
+                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">
                     <ul className="p-autocomplete-items" role="listbox" id={this.props.listId}>
                         {items}