I need Angular Materials' AutoActiveFirstOption to turn false as soon as user hovers over other items

655 Views Asked by At

I need Angular Materials' AutoActiveFirstOption to turn false as soon as user hovers over other items in the drop down list. It doesn't make sense to continue to have the first item selected when user is hovering over any other item in the drop down list. This results in the user getting confused as to which item is going to be selected. Also I noticed that if user hits enter while hovering over a different item other than the first item, the first item still gets entered and not the hovered item. (So another question is how do you make the item currently being hovered over be selected when the user presses the enter key?)

I tried this code below. I had to make a div and put the mouse events there since putting them directly in the mat-autocomplete didn't work, if anyone knows why, please feel free to answer that too.

<mat-autocomplete [autoActiveFirstOption] = "!isUserHovering" #auto="matAutocomplete" (optionSelected)="getAcronymsByCategory()" [displayWith]="displaySelectedCategory" [panelWidth]="350">
  <div (mouseenter)="setIsUserHovering(true)" (mouseleave)="setIsUserHovering(false)">
    <mat-option *ngFor="let category of filteredAcronymCategoryOptions | async" [value]="category">
      {{category.category_acronym}} ({{category.category_name}})
    </mat-option>
  </div>
</mat-autocomplete>

And my typescript:
setIsUserHovering(bool: boolean) {
  this.isUserHovering = bool;
  // this.isUserHovering = !this.isUserHovering
  console.log("isUserHovering", this.isUserHovering)
  console.log("bool being passed", bool)
}

So in closing, I have four questions including the main one:

  1. How to make autoActiveFirstOption set to false when mouse enters div
  2. Is there a way to check what autoActiveFirstOption is currently set to? AutoActiveFirstOption
  3. Why couldn't I have put mouse events inline with mat-autocomplete, why did I have to make a div and put mouse events there instead?
  4. How do you make the item currently being hovered over be selected when the user presses the enter key.
0

There are 0 best solutions below