Angular material reusable mat-chip-list with 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.

I took a look at the stackblitz but I'm not sure I'm following on the overlapping issue. Do you think you could include a screen shot of the current behavior and desired behavior? — robbieAreBest, Aug 02 '22 at 00:49
@robbieAreBest I updated the stackblitz and added screenshots. — Vanessa, Aug 02 '22 at 01:13

score 1 · Answer 1 · answered Aug 02 '22 at 04:11

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.

Not really practical since the text box could be positioned anywhere on the page and this will always put the option list at the top of the page at 120px. — Vanessa, Aug 02 '22 at 22:56

score 1 · Accepted Answer · answered Aug 03 '22 at 19:18

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

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

2 Answers2