Nodebb: Cannot scroll "Manage Group" dialog after "Change Icon" in ACP

[pichalite]

Once the "Change Icon" is clicked, "Manage Group" modal is not scrollable anymore to hit Save.

[julianlam]

Hm... this one _sounds_ like a bootstrap bug. Manage Group is a modal, as is Change Icon, so perhaps when two modals stack, closing the top modal messes up the backdrop?

[julianlam]

Please see twbs/bootstrap#15837

[julianlam]

Ok, so that was closed as invaid, so the _proper_ solution here is to refactor the interface to not use multiple modals.

[julianlam]

I imagine the best course of action would be to move the group edit modal out to a separate page, similar to my plans for the category mgmt page.

[MegaGM]

move the group edit modal out to a separate page

:+1:
Please also move "Add User to Group" above of "Members" on that page, it makes sence.

[yanickrochon]

Just a note, since I cannot post this in the original issue that I have created (it is locked, and referenced already), I am posting my solution here, and the cause of the problem to easily solve your issue with Bootstrap.

The problem is the line

that.$body.removeClass('modal-open');

In Bootstrap's modal module's hideModal function.

When closing any modal, check if there's an active modal being displayed. If so, reset the modal-open class. Like so :

var activeModal = $('.modal.in:last', 'body').data('bs.modal');

if (activeModal) {
    activeModal.$body.addClass('modal-open');
    activeModal.enforceFocus();
    activeModal.handleUpdate();
}

Works like a charm for me.

[julianlam]

Thanks for sharing your fix, @yanickrochon! I'll admit the _more correct_ method of not using multiple modals is the correct course of action, but perhaps this will help others who stumble on the upstream issue.

[SeoRoman]

@yanickrochon You sir... are a genius! Thank you so much! I was just looking for a fix to this issue as my create user box was scrollable, where as my "create role" (to add to my user list) was not... and thus I lost the ability to scroll the user form... This worked perfectly and was easy to implement :)

Thanks!

[1Rhino]

@yanickrochon Thank you. You saved my life! :+1: