Angular 材料可重复使用 mat-chip-list 与 mat-autocomplete

Question

I am trying to do something similar to this question by creating a reusable chip list form control, however I need to add an autocomplete to the chip list as well. The problem is that the autocomplete option list overlaps and does not expand to the full width the text box. When I do not put the chip list in a reusable component the autocomplete does not overlap as expected. How do I prevent the overlap?

Forked version of the code can be found here .

Answer 1

add focus event to input:

(focus)="addGoodStyleToMatAuto()"

add this function to ts:

addGoodStyleToMatAuto(): void {
    setTimeout(() => {
      try {
        const matAuto = document.getElementsByClassName(
          'mat-autocomplete-panel'
        )[0];
        matAuto.parentElement.classList.add('auto-class');
      } catch {}
    }, 10);
  }

add this class to style.css:

.auto-class {
  width: 100% !important;
  top: 120px !important;
  left: 0 !important;
  transition: 0.2s;
}

Forked version of the code can be found here .

Answer 2

I was able to fix the issue by using the matAutocompleteConnectedTo property on the autocomplete input which I pass to the component as an input. I connected the autocomplete to the <mat-form-field> element. However, the <mat-form-field> has padding on the bottom so I added a custom class to my autocomplete with a negative margin to counteract the padding.

styles.css:

.email-autocomplete {
  margin-top: -1.34375em;
}

Forked stackblitz here