CODEWITHSUNDEEP
angularangular-material
Vanessa
Vanessa

Reputation: 371

Angular material reusable mat-chip-list with mat-autocomplete

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.

enter image description here

enter image description here

Upvotes: 0

Views: 1471

Answers (2)

Vanessa
Vanessa

Reputation: 371

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

Upvotes: 1

Mojtaba Nejad Poor Esmaeili
Mojtaba Nejad Poor Esmaeili

Reputation: 1352

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.

Upvotes: 1

Related Questions