Comments (2)
@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?
from angular-mentions.
@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();
inblurHandler(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
th
has 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 az-index
higher than0
. In my case I saw that the<table>
containing theth
s hadz-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
from angular-mentions.
Related Issues (20)
- Upgrade to angular 13 + Ivy
- infinite scroll and pagination doesn't work in mention list modal
- Need an event when removed after mension item
- Build error after update version 1.5 HOT 3
- How to use the directive with async API results? HOT 3
- Support for angular 13 HOT 4
- How to show list mention after select mention item ?
- Is this project dead?
- Angular 11 Error: ./node_modules/angular-mentions/fesm2015/angular-mentions.mjs 1075:12-24 Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available) HOT 1
- having multiple text areas with mentions configured in a div and if div has scroll then mentions dropdown is not showing in correct postion HOT 1
- Angular 14 Support? HOT 2
- How can we highlight or bold selected(Mention) words HOT 1
- Incorrect peer dependency range
- No records matched / found message HOT 1
- How can I remove the mentioned user from mentioned items list once I have already mentioned it?
- I have mentioned the same user again then the font is not bold and the same user is a third-time stack in the mentioned list
- Version 1.4 is throwing this error. This application depends upon a library published using Angular version 14.0.6 HOT 3
- We need to remove mention user list event. HOT 1
- @Output itemSelected doesn't emit on contentEditable after selecting text and triggering with '@' HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-mentions.