When multiple Load More interactions are on a page, they do not correctly correspond to their assigned query loops. When the page loads, everything looks as it should. Loops with more posts to show have Load More buttons, and loops without more posts do not. Bugs:
1- After clicking on one Load More button, other buttons appear that should not be visible. (0:50)
2- Clicking on those buttons can cause loops they are not assigned to to load more. (2:09)
3- When the first loop runs out of posts to load, other buttons that should still be visible are hidden. (1:20)
I have tried deleting and recreating the buttons with interactions.
Because I need to launch the site before this bug can be fixed, I added some JS to make sure that hidden buttons stay hidden, and that seems to fix all the bugs.
/* Fix Load More buttons */
document.addEventListener( 'DOMContentLoaded', fixLoadMoreButtons, false );
function fixLoadMoreButtons() {
// Delay so we run after Bricks sets `brx-load-more-hidden`
// Run continuously so buttons that get hidden stay hidden
setInterval( () => {
document.querySelectorAll( '.brx-load-more-hidden' ).forEach( button => button.classList.add( 'load-more-stay-hidden' ) );
}, 1000 );
}
Maybe this could attach to a click handler instead of setInterval, but then I have to worry about waiting for the AJAX response, and I don’t care enough, and I assume I’ll remove this code at some point when the bug is fixed.
Unfortunately, I cannot reproduce the issue. Please try to set one of the queries as the main query and see if it fixes the problem. If not, please clone your site to another staging environment and provide login credentials so we can take a detailed look.
This is still on my mind. Currently the “staging” site is the old site, still kicking around “just in case.” When we finally delete that and make staging a copy of the live site, I will return to this. Fortunately, the JavaScript workaround is sufficient for the time being.