Integration between fancybox and tagify fails

[adonisfigueroa]

There is a problem using tagify inside a modal opened by fancybox, the option to add tags is not available. In the previous version of fancybox it was possible using the option: data-selectable:

$('.tagify span').attr('data-selectable', true);

But in the new version that option is not available.

I verified that the markup has the option contentEditable: <span contentEditable="true" ... >

If I make a right click, tagify shows the box to write the tag, so looks like the problem is the event to click over some element different to those declared in the code: ["BUTTON","TEXTAREA","OPTION","INPUT","SELECT","VIDEO"]

[fancyapps]

Hi,

Could you, please, clarify what is tagify, and and maybe you could create a demo where your issue can be observed?

[adonisfigueroa]

Tagify is a library to work with tags: https://github.com/yairEO/tagify

I'm uploading an example of how to use tagify inside fancybox, as I mentioned in the first post, the problem looks like the event to click over an element, in this case: tags.tagify > span

testTag.zip

[fancyapps]

Have you tried setting dragToClose:false?

[adonisfigueroa]

Yes, it doesn't work, it stopped the drag event but the problem to click elements still persist

[fancyapps]

I believe this problem is with Tagify itself. I have created a demo - https://codesandbox.io/s/smoosh-microservice-6s1elt?file=/src/index.js - where I have disabled all touch and focus events of Fancybox. And, as you can see, it only (partially) works after input field is focused (by pressing the tab key).

[adonisfigueroa]

I'm not sure if the problem is Tagify because if you run tagify out of Fancybox, it runs correclty, the problem just appears when it's used inside fancybox.

I had a very similar problem using the previous fancybox version 3, but I avoided the problem using this option: $('.tagify span').attr('data-selectable', true);

[fancyapps]

So, I created a test page on my PC, copy pasted the code from the demo above ... and it just works perfectly fine. Sorry, but I have no clue what to do here.

[Nomerokkk]

The same problem with many plugins, but if you make the height of the modal window larger so that a scroll appears, then everything works

[fancyapps]

@Nomerokkk Please, name at least one of the "many plugins", preferably with a demo.

[Nomerokkk]

@fancyapps CKEditor, Select2. The problem, as I understand it, is that focus does not work on elements other than input, textarea. contenteditable tag doesn't help

[fancyapps]

Then my guess is that you simply have to set trapFocus : false, otherwise focus will be trapped inside the modal, but these plugins are creating additional elements outside the modal (unless you have configured them).

[Nomerokkk]

trapFocus : false doesn`t help, everything works if the height of the modal is greater than the height window

[Nomerokkk]

All elements are configured inside the modal

[fancyapps]

I updated previous demo to v5, and it works fine - https://codesandbox.io/s/smoosh-microservice-6s1elt?file=/src/index.js