bug(cdkDropList/mat-tab-nav-bar): Wrong container for cdkPlaceHolder/cdkDrag after drag/hover from other list

[gkrzysztofbury]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The issue occurs when a button from the second nav-bar is dragged very slowly into the first one from the right side.

This happens because the mat-tab-nav-bar is not a single <div>, but consists of several layers:

<div mat-tab-nav-bar cdkDropList>
  <button class="mat-mdc-tab-header-pagination-chevron"></button>
  <div class="mat-mdc-tab-link-container">
    <div class="mat-mdc-tab-list">
      <div class="mat-mdc-tab-links">
        <!-- content, "Tab 1", etc -->
      </div>
    </div>
  </div>
  <button class="mat-mdc-tab-header-pagination-chevron"></button>
  <!-- "Tab 5" lands here in the video --> 
</div>

When the dragged button enters another nav-bar, this function is called: single-axis-sort-strategy.ts#L175. Since it does not find newPositionReference, the base cdkDropList element is used as the parent of the placeholder: single-axis-sort-strategy.ts#L213.

Reproduction

Video: YouTube
StackBlitz: Example

Expected Behavior

Dragged button lands along with others

Actual Behavior

Dragged button lands in wrong container

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu): all

[crisbeto]

Duplicate of #29124.