1

Posting this here to save someone else the headache.

Angular automatically focuses on the first available option when no initial value is set. This can be confusing to the user, because it shows focus on the first option as well as focusing options that are hovered (two focused options at the same time). After researching online there are a ton of bloated and non-accessible answers to this dilemma.

Jefferson
  • 21
  • 5
  • 1
    Thanks for the information. Could you edit your question so that includes only the question and post an answer below? – doneforaiur Jul 29 '23 at 06:17
  • For sure! Sorry this is my first post, so any feedback or critiques would be appreciated! – Jefferson Jul 29 '23 at 19:49
  • 1
    Welcome to Stack Overflow! Excelent, you should also mark your answer as accepted answer. Also, I'd suggest see the [tour]. :^) – doneforaiur Jul 29 '23 at 20:26

1 Answers1

1

I found that you can show focus on hover AND keep keyboard focus/controls, by adding a hidden option with style="display:hidden" and setting that as the default value of your Mat Select.

Now all of the options are unselected initially and will only show focus on options that are hovered. If the user tabs or uses keyboard controls the focus stays within the Mat Select and is just as keyboard accessible.

Hope this helps someone out there that's having the same issue!

//HTMl
      <mat-form-field>
        <mat-label>Select</mat-label>
        <mat-select #mySelect value="initialSelection">
          <mat-option value ="empty" style="display: none;"></mat-option>
          <mat-option *ngFor="let selection of selections" [value]="selection.selectionId"> 
            {{ selection.selectionId }}
          </mat-option>
        </mat-select>
      </mat-form-field>

//TS

  public initialSelection = 'empty';
Jefferson
  • 21
  • 5