Comments (13)
Hey Yair - thanks for your time on this.. Funny it was actually a Bootstrap 'improvement' that did turn out to be the issue. Maybe Bootstrap 5.4 will have your suggestions implemented :`D
from tagify.
EDIT: I've been able to re-apply all the CSS to the 'modalified' appendTarget version - EXCEPT the width and horizontal position of the dropdown. In non-appendTarget version, it inherits width of the inputTagify field and has left alignment with the input field. But in appendTarget version it can't inherit width and horizontal position is under the cursor (which will move as more items are selected). This has made the workaround look a bit hacky.
In the codepen the weird offset didn't occur until I nested the tagify-input field in Divs.. When I removed the bootstrap classes the suggestion box was still offset but in a different location.
Therefore from playing around with Codepen I can see both the Div nesting and CSS have an impact on the new positioning, albeit the css is a lesser extent.
I've got a workaround, although it reset all the prettifying css I'd added.. Not urgent, but would be great when it's fixed. :)
from tagify.
FYI, just came across a similar problem with Select2.. their solution is same as yours - appending to the modal.. ;)
https://select2.org/troubleshooting/common-problems (Select2 does not function properly when I use it inside a Bootstrap modal.)
from tagify.
@Diana-Alex-Rodrigues - you should bug Bootstrap
github to solve this, they are in fault here
from tagify.
I've discovered it's a Bootstrap 5.1+ conflict.
I'm not sure whether it's Tagify or Bootstrap that has a 'bug', so this is my submission to the Bootstrap team: twbs/bootstrap#37881
It includes a codepen which demonstrates the issue:
https://codepen.io/gidzr/pen/OJwjMNN
Cheers!
from tagify.
What made you think this is a Bootstrap issue?
from tagify.
You're right - I can't be certain whether Tagify hasn't been updated for new Bootstrap 5.1+, or whether it's a Bootstrap bug introduced 5.1+..
Just easier for me to infer (probability-wise) it's a Bootstrap bug because:
- It's a new (undesirable) behaviour that's been introduced rather than the cessation of Tagify functionality
- It's only happened after a major Bootstrap change in a new Bootstrap series.. going 5.0 to 5.1 in the new 5 series... and not a change with Tagify versioning
- The new thing is related to modal only, not on regular pages (inconsistent)..
- It only happens on the .on('add') click listener for words in a whitelist, but not from .on(add) keyboard listener for dynamically added words (inconsistent)
So ... IF (big big if).. it was the fault of Tagify, I can't understand what "improvement" to Bootstrap would cause an inconsistency between click vs keyboard listener behaviour on the same listening event, and only in modals and not in normal pages.
Do you think the issue is Tagify or Bootstrap?
from tagify.
I've analyzed the bug and it's Bootstrap's fault.
Tagify's dropdown list is injected to the <body>
element and I think Bootstrap is treating it in a weird way, since a click-outside should close the modal, but it doesn't get closed in this situation (which is easily done since you can know if a mouse click was made on top of a modal, even if the element is not within it in the DOM) and then scrolls to the top.
They didn't account for such cases maybe.
You can bypass this by setting the Tagify's dropdown
setting with an additional sub-setting:
appendTarget: document.querySelector('.modal-content'),
This works if you have just one modal... if you have more you will need to place a DOM node reference to the correct one.
from tagify.
Awesomeness!.. Thanks heaps Yair!
As mentioned above I posted bug to Bootstrap - but they didn't really look into it. I've updated my bug report to Bootstrap with your comments above. Hopefully that will get their attention, and they can possibly fix it at their end. ;P (well.. highly unlikely but worth a shot).
Cheers
from tagify.
HOLY COW!..pheww.. I've just spent a full day trouble shooting this..
I implemented your fix "appendTarget: document.querySelector('.modal-content')," .. thinking job done. But the tagify options stopped loading. It worked in CodePen, but not my site.. so I knew it was some type of conflict.
I meticulously removed blocks and lines of code.. re-created separate sandboxes.. and still no luck..
Then finally I discovered something un-b-fkn-lievable..
The "appendTarget: document.querySelector('.modal-content')," is AFFECTED BY BOOTSTRAP CLASSES!!! (ie. d-flex, row, container, wrapper, etc)
I've update the CodePen to illustrate: https://codepen.io/gidzr/pen/OJwjMNN
Instead of the selections appearing at the site of the tagify intput box, it appears completely offset (sometimes out of viewport).
I'm adding a separate BUG for this. :)
from tagify.
I think this is a Tagify bug that miscalculates the suggestions' menu position when appendTarget
is used. I will investigate.
I don't see a relation between the miscalculation and any CSS coming from Bootstrap.
The positioning algorithm should place the menu relative to the Tagify component.
from tagify.
Hello @gidzr ,
Did you manage to get this to work ?
I already tried every tip and still does not work.
from tagify.
Hi @Diana-Alex-Rodrigues ..
To confirm, did you try:
var appendTarget = $(targetElem).parents('.modal').find('.modal-content')[0]
Then when initiating tagify:
new Tagify(inputSelector,{
whitelist: optionTags,
dropdown: {
position : 'text',
appendTarget : appendTarget,
Also, are you using the jquery version of tagify or the vanilla javascript version? as they might be slightly different
from tagify.
Related Issues (20)
- Callback when original tag data has loaded HOT 1
- Console warning on tag addition via enter key HOT 1
- Warning in Console: [Tagify]: Cannot find element in Tag template: . .tagify__tag-text HOT 1
- mix mode : pressing the down key at the end of line displays drop-down list
- Multiple init Tagify HOT 1
- Sprockets error in Rails 7 due to filename change in v4.25.0
- Intermittent error in setRangeAtStartEnd HOT 3
- prop-type error HOT 9
- Clicking outside doesn't close dropdown in select mode and tagX class is blank
- Options not filtered in select mode, userInput=true and tagX='' HOT 1
- in 4.26.2 value cannot be non-string in users-list example
- A double tag is created for delimiter when typed HOT 3
- react.tagify.jsx Failed to compile HOT 3
- Ignore an email address in the middle of an sentence HOT 1
- Tagify selct mode incorrect behavior HOT 7
- React className property supports only one class
- "Uncaught (in promise) TypeError: t is null" when pressing Tab key with empty input and dropdown is shown
- default highlighting of selected value in single-select mode in the dropdown HOT 4
- autoComplete.rightKey = true, mode = null (Default), two problems with the rightKey behavior
- We Insert HTML Tags Or some text between '<' and '>' its remove from textarea when edit 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 tagify.