0

It works fine in chrome and other browser but fails to work in IE browsers. When I try to run it chrome it works fine even if I give tabindex=1, but it fails to give the same desired output in IE browsers.

<div>
  <ul>
    <ng-container *ngIf="namelist.length; else doElse">
       <li
        *ngFor="let title of namelist; index as i"
        #list
        class="some class XYZ"
        (click)="selectSomething(title)"
        (keydown.enter)="makeSelection(title)"
         >
        <div
          class="some class PQR"
          tabindex="0"
          (keydown.arrowup)="prev(listElements, i)"
          (keydown.arrowdown)="next(listElements, i)"
        >
          <span class="some class abcd">
            {{title}}
          </span>
         </div> 
        </li>
        </ng-container>
   </ul>
</div>
TheDoozyLulu
  • 384
  • 2
  • 6
  • 23
  • see https://stackoverflow.com/questions/29393144/how-to-prevent-svg-elements-from-gaining-focus-with-tabs-in-ie11 try adding focusable=false to your `span` nested in your `div`. – joshwa Mar 25 '20 at 17:03

1 Answers1

0

I tried to create a sample Angular project and added some text boxes with tab index. Based on my testing result I found that it is working fine in IE 11 browser.

Here is my testing result.

enter image description here

You can see that cursor is moving to the next control just with the single tab key press. I suggest you to create a new sample project and test this issue in it.

If it works fine then there can be some issue in your original project. It can help you to narrow down the issue and can be helpful for finding the cause for this issue.

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19