Angular 15 issues?

[jchristensen726]

Is anyone else having issues with this after upgrading to Angular 15? Since the upgrade when the mentions open they are restricted to the boundaries of the mat-form-field. I've tried removing the mat-form-field but then it appears at the bottom of page. Any suggestions?

Stackblitz with an example

[Frankitch]

@jchristensen726 I am facing the same issue but I have noticed that if the form field appearance is set to outline instead of fill (the default one), it works. I did not find what in the fill appearance causes this issue so far... Anyone for a workaround?

[sumbricht]

@jchristensen726 I stumbled across the same issue today and did some investigation. An article on stacking contexts pointed me to a Chrome / Firefox extension named "CSS Stacking Context Inspector". With that and a bit of playing around I figured out what was happening (in my situation) and how to fix it. As I'm not sure whether it will be a cookie cutter solution, here rather a little recipe for how you could manage to solve this for your case:

• Open node_modules/angular-mentions/fesm2020/angular-mentions.mjs and comment out the call to this.stopSearch(); in blurHandler(event). This ensures that the overlay with the mention suggestions does not close but will stay open indefinitely (that's helpful as you'd have a hard time debugging if the DOM element keeps disappearing when it loses focus)
• Use the Stacking Context Inspector to see what elements have a stacking context that's overlapping your content. For me it looked like this. Two table rows (headers and column filters) were overlapping search results b-e (see image)
  
• As you can see, each thhas its own stacking context and the next "higher" parent context was the main context (mat-sidenav-content) area
• Now the essential part: I had to force the mat-form-field (which contained the mention field) to have its own stacking context. You can do that using CSS by giving it position: relative; and a z-index higher than 0. In my case I saw that the <table> containing the ths had z-index: 100; so I had to go to 101 or higher
• As you can see, the mat-form-field now has its own stacking context; this wasn't the case before
  
• Don't forget to uncomment this.stopSearch(); :-)

I hope this helps you get down to the problem