fix(focus-trap): not attaching correctly if element is not in the DOM on init

[crisbeto]

Currently the focus trap attempts to attach itself once on init (e.g. when it is projected inside of an overlay), however in some cases it might not be in the DOM yet. These changes make it so it re-tries to attach itself until it does so successfully.

[jelbourn]

Add a unit test for this?

[crisbeto]

I had a hard time putting together a unit test that would fail as we expect it to. The only way I got the issue to happen at runtime was using a focus trap as the content of a select which has a complicated setup around it. I tried throwing a portal into the unit test, but it still worked.

[jelbourn]

I ran into the issue with a setup like

<ng-template cdkConnectedOverlay>
  <div cdkTrapFocus>...</div>
</ng-template>

[crisbeto]

That doesn't seem to work either. During the test the focus trap still manages to find a parent node which allows it to attach (the <div id="root0"> in particular which AFAIK is the Karma root element), whereas in the demo app it doesn't, For reference, here's what the test component looks like:

@Component({
  template: `
    <button cdkOverlayOrigin #origin="cdkOverlayOrigin">I'm the origin</button>

    <ng-template cdkConnectedOverlay [open]="isOpen" [origin]="origin">
      <div cdkTrapFocus><button>I'm trapped!</button></div>
    </ng-template>
  `
})
class FocusTrapInOverlay {
  isOpen = false;
}

[jelbourn]

The whole setup where it happened consistently was:

<ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen">

  <div cdkTrapFocus class="color-picker"
        role="dialog" aria-label="Color picker">
      <div role="listbox" tabindex="0" aria-label="Select a color"
        (keydown)="keydownHandler($event)">
        <div *ngFor="let color of colors; index as i"
            role="option"
            [style.background]="color.hex"
            [attr.aria-label]="color.name"
            [attr.aria-selected]="color.hex == selectedColor"
            (click)="selectedColor = color.hex; isOpen = false"></div>
      </div>
    </div>
</ng-template>

(ran into it while working on my angular mix demo)

[josephperrott]

@jelbourn How are we looking on this one?

[jelbourn]

LGTM

[jelbourn]

@torabian Please do not spam unrelated PRs and issues promoting a project. Further spam will lead to your account being blocked.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}