Coder Social home page Coder Social logo

Comments (13)

gidzr avatar gidzr commented on June 18, 2024 1

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.

gidzr avatar gidzr commented on June 18, 2024 1

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.

gidzr avatar gidzr commented on June 18, 2024 1

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.

yairEO avatar yairEO commented on June 18, 2024 1

@Diana-Alex-Rodrigues - you should bug Bootstrap github to solve this, they are in fault here

from tagify.

gidzr avatar gidzr commented on June 18, 2024

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.

yairEO avatar yairEO commented on June 18, 2024

What made you think this is a Bootstrap issue?

from tagify.

gidzr avatar gidzr commented on June 18, 2024

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:

  1. It's a new (undesirable) behaviour that's been introduced rather than the cessation of Tagify functionality
  2. 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
  3. The new thing is related to modal only, not on regular pages (inconsistent)..
  4. 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.

yairEO avatar yairEO commented on June 18, 2024

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.

gidzr avatar gidzr commented on June 18, 2024

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).

twbs/bootstrap#37881

Cheers

from tagify.

gidzr avatar gidzr commented on June 18, 2024

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.

yairEO avatar yairEO commented on June 18, 2024

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.

Diana-Alex-Rodrigues avatar Diana-Alex-Rodrigues commented on June 18, 2024

Hello @gidzr ,
Did you manage to get this to work ?
I already tried every tip and still does not work.

from tagify.

gidzr avatar gidzr commented on June 18, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.