CODEWITHSUNDEEP
angularangular-material
Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3011

Angular material - autocomplete component dropdown section does not stick to the input field

The autocomplete component from angular-material is not working as expected inside the MatDialog component. The drpodown section from autocomplete component does not stick to the input field.

stackblitz link - example

to reproduce - Goto above stackblitz. Click on "open popup" button. Click on the "Pick One" autocomplete field. The options will open as dropdown. Then scroll the bodu of popup. Notice the dropdown section of autocomplete component does not stick to the input field. How do I fix this?

Upvotes: 3

Views: 13290

Answers (3)

Rahul Kathar
Rahul Kathar

Reputation: 43

.mat-drawer, .mat-sidenav {
  &[cdk-scrollable], &[cdkScrollable] {
    .mat-drawer-inner-container {
      overflow: visible;
    }
  }
}

Just try it on your globe SCSS file.

Upvotes: 0

Jobayer Ahmmed
Jobayer Ahmmed

Reputation: 2076

Add cdkScrollable to the scrolling div.

  • Import ScrollingModule in app.module.ts
  • Add cdkScrollable to the scrolling div

<div style="width: 300px; height: 100px; border: 1px solid red; overflow-y: auto;" cdkScrollable>
 <p>Angular Material, the ultimate design</p>
 <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let option of options" [value]="option">
     {{option}}
   </mat-option>
 </mat-autocomplete>
 <p>Angular Material, the ultimate design</p>
</div>

Upvotes: 2

Marshal
Marshal

Reputation: 11081

This is because the drop down is actually part of the cdk-overlay-container and not part of the matAutocomplete... only triggered by the matAutocomplete to be rendered in the cdk-overlay-container, with a calculated top position based on the placement of the matAutocomplete input field at the time of the user interacting with the field.

Important Note: The CDK container is transparant and the full height and width of the root browser view port, overlaying everything in your app.

If you were to put that matAutocomplete in the middle of the dialog, open, then close... scroll position a bit, open matAutocomplete again... you will notice it renders in the new position with the newly calculated top and not the old....

Once it is rendered and on the DOM via the cdk-overlay-container however, there is no real-time scrolling event to force the cdk-overlay-container to "re-calculate" the top position with the scroll event.

I think the idea is that users who are interacting with an autocomplete typically are not scrolling around while doing so... as they are actively searching for a value... once selected... they then proceed with UI navigation.

If you notice, once you are interacting with the mat-select in that same dialog, you are not able to scroll while it is open... I think they did that for this specific reason as it too uses the cdk-overlay-container to render the dropdown... I am not exactly clear on why the matAutocomplete doesn't behave the same.

If you put this in your component css, then open your dialog, you can see the dialog and the drop down are part of this "hidden" container.... even the autocomplete before opening the dialog exposes this container and you can see the drop down is not red... but everything below it is.

::ng-deep .cdk-overlay-container{
  background-color: #ff000087;
}

Additional information on CDK here.

https://material.angular.io/cdk/overlay/overview

Upvotes: 3

Related Questions