Drag and drop styling for mat-chip in Angular Material 18

Question

When upgrading my Angular application from version 14 to 18, a lot has changed. I'm using Angular Material for some of the components, and the Chips aren't working as before.

The previous mat-chip-list is replaced by mat-chip-listbox with mat-chip-option as a child.

Where I only require drag and drop functionality I use:

<mat-chip-set>
    <mat-chip cdkDrag *ngFor="let country of brand.availableCountries">        
    </mat-chip>
</mat-chip-set>

Initially, all styling for mat-chip was gone, but I added the below class to make it look like mat-chip-option, but the drag and drop styling is not as expected.

mat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
 font-size: 14px;
 line-height: 32px;
 border-radius: 16px;
 border: 1px solid transparent;
 cursor: pointer;
 background-color: #e0e0e0;
 margin: 4px;
 //transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 font-family: Roboto, sans-serif;
}

This is the original chip.

This is the styling when dragging.

I also tried it with , but the click option is default there, and I could not disable that part.

Answer 1

The scrollbar can be removed by using overflow: hidden.

mat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
 font-size: 14px;
 line-height: 32px;
 border-radius: 16px;
 border: 1px solid transparent;
 cursor: pointer;
 background-color: #e0e0e0;
 margin: 4px;
 //transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 font-family: Roboto, sans-serif;
 overflow: hidden !important;
}

The issue is not reproducible in stackblitz though.

Stackblitz Demo