Conflict with SweetAlert2

[joshberg]

Describe the bug
GuideChimp will not draw the modal overtop the SweetAlert2 modal; however, the element on the SweetAlert2 modal is highlighted properly.

Screenshots

To Reproduce
Steps to reproduce the behavior:

1. Try to attach a GuideChimp tour event to a SweetAlert2 element.
2. Run the tour.

Expected behavior
GuideChimp should be able to draw on top of SweetAlert2 to continue the tour.

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [chrome]
• Version [90.0.4430.212]

Additional context
I am using the Lazy-loading plugin and the triggers plugin.

Rearranging the DOM elements and clicking around a bit allowed me to demonstrate the results I expected.

Before:

After:

[v-rudkovskiy]

Hello @joshberg , can you tell me which version of GuideChimp and sweetAlert2 you are using?

No issues were found on Guidechimp v. 4.0 and sweetAlert2 v. 11.

Here is my code:

   const tour = [{
        element: '#example',
        title: 'Title',
        description: 'Lorem ipsum...'
    }];

    const guide = GuideChimp(tour, { position: 'right' });

    Swal.fire({
        title: 'It is example!',
        html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
        icon: 'info',
        confirmButtonText: 'Cool',
        didOpen() {
            guide.start();
        },
    })

And this result I have:

[joshberg]

I am using GuideChimp 4.0 and SweetAlert2 6.4.2. Unfortunately there are a lot of breaking changes that keep us from updating to the latest version of SweetAlert2.

Here is my snippet that is responsible. The tour starts before the SweetAlert2 is displayed which is why I am using the lazy load plugin.

var tour = [];
      
tour.push({
    element: '#category-fav',
    title: 'Step 1: Deleting a Favorite',
    description: 'Open the Favorites category.',
    triggers: {
        next: {
            element: '#category-fav'
        }
    }
});
tour.push({
    element: '#dft-issues',
    title: 'Step 2: Deleting a Favorite',
    description: 'Click and hold on the defect you would like to remove from favorites.',
    triggers: {
        next: {
            element: '#dft-issues'
        }
    }
});
tour.push({
    element: '#modalContentId',
    title: 'Step 3: Deleting a Favorite',
    description: 'Click on the box or the words "Add (defect) to favorites" to uncheck the box.',
    triggers: {
        next: {
            element: '#addDefectToFavorites'
        }
    }
});
tour.push({
    element: 'swal2-confirm',
    title: 'Step 4: Deleting a Favorite',
    description: 'Click on Save Changes to save. Discard changes to cancel.',
    triggers: {
        next: {
            element: '.swal2-confirm'
        }
    }
});

GuideChimp(tour).start();

[v-rudkovskiy]

@joshberg Hello, we are not able to reproduce this issue with older version of sweetAlert v6 as the documentation for this version isn’t available public.
Any chance you could share documentation of test environment to investigate this issue?

[joshberg]

I can give the sweetalert2 files that we have in the project. I cannot release the other parts. Basically, I have list of divs contained in a div. When the user clicks on a specific div called out in the tour, it opens up a list of more divs (i.e. their favorites). The user performs an action on their favorites (long click) and a swal opens. The tour steps should display on their but they do not.
sweetalert2.zip

Intersting discovery, unchecking this css or setting it to absolute seems to fix the issue for me.

.gc .gc-fixed{
    position:fixed;
}

[v-rudkovskiy]

@joshberg I didn't find the css file in your zip archive. Is this a public website? Could you provide us the link here or via email at guidechimp@labs64.de

I was able to get guidechimp to highlight the element correctly using setTimeout, this is not a GuideChimp problem, it is a sweetalert v6 problem because sweetalert does the onOpen function before the bounce animation finishes.

const tour = [{
        element: '#example',
        title: 'Title',
        description: 'Lorem ipsum...'
    }];

    const guide = GuideChimp(tour, { position: 'right' });

    swal({
            title: 'It is example!',
            html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
            confirmButtonText: 'Cool',
            onOpen() {
                setTimeout(() => {
                    guide.start();
                }, 300);
            }
        });

[joshberg]

Sorry about that. I do have a work around that is working for me. I modified the css line on GuideChimp from fixed to absolute:

.gc .gc-fixed{
    position: absolute;
}

Granted it is not the best solution because I don't know what else will break, it is at least a workable solution so that I can move forward. Here is the CSS for that version of sweetalert2. Thank you for your help.
sweetalert2.zip

[v-rudkovskiy]

@joshberg I do not recommend that you change the styles of this class, otherwise the tour display may contain issues in some cases, I think you should pay attention to the sweetalert animation and start the tour after any animations.

I haven't got any issues with sweetalert v6 with the js and css you gave me:

// it is my code
const tour = [{
        element: '#example',
        title: 'Title',
        description: 'Lorem ipsum...'
    }];

const guide = GuideChimp(tour, { position: 'bottom' });

 swal({
        title: 'It is example!',
        html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
        icon: 'info',
        confirmButtonText: 'Cool',
        onOpen() {
            setTimeout(() => {
                guide.start();
            }, 300);
        }
    });

Firefox:

Chrome:

[joshberg]

Unfortunately the sweet alert opens after the tour is going. It is part of the sequence... Is there a way to force the tour step to redraw or delay the drawing? I could perhaps call the step to redraw after the alert is opened.

[v-rudkovskiy]

You can use the onBeforeChange event listener to delay the step:

const tour = [
        {
            element: '#example',
            title: 'Title',
            description: 'Lorem ipsum...',
            onBeforeChange() {
                return new Promise((s) => {
                    // delay of 500 ms
                    setTimeout(() => {
                        s();
                    }, 500);
                });
            }
        },
    ];

or if you want to redraw, use the "refresh" function:

    swal({
        title: 'It is example!',
        html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
        icon: 'info',
        confirmButtonText: 'Cool',
        onOpen() {
          // refresh highlighting and position
           guide.refresh();
        }
    });

[joshberg]

I attempted both of those... They did not work for me. I ended up doing this.

let guide = GuideChimp(tour);
let removedFixedInterval;
guide.on('onStart', function(){
    removedFixedInterval = setInterval(function(){
        $('.gc-control').removeClass('gc-fixed');
    }, 500);
});
guide.on('onStop|onComplete', function(){
    clearInterval(removedFixedInterval);
});
guide.start();

Still not the best, but visually it looks good and it does not modify the libraries at all. I'll consider this issue closed as we exhausted all avenues and I am content with my solution. Thank you for all your help!