AdvancedCustomFields / AdvancedCustomFields/acf

Relationship field scroll fails to load more posts due to Math.ceil rounding on non-retina displays

Open
#961 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
When using the Relationship ACF field, the event listener that is triggered on scroll does not always load the next chunk of post type results as it seems the event is not always triggered - potentially relating to the Rank Math plugin and/or non-retina displays.

To Reproduce
Steps to reproduce the behavior:

Prerequisite that the Rank Math plugin should be installed, activated and setup. And that you must be on a non-retina display (72 PPI).

  1. Ensure a Relationship field is created which is linked to a Post Type that has 60+ entries
  2. Scroll down the left-hand list of post type entries to trigger the AJAX request to load the next 20 items
  3. Repeat step 2 to trigger the next AJAX request
  4. See error where event is not triggered on scroll and AJAX request to get the next 20 items is not fired

Expected behavior
Continued scrolling will trigger the applicable AJAX request to get the next chunk of items until there are no more items to retrieve.

Screenshots or Video
2 videos on Google Drive (one with the proposed fix): https://drive.google.com/drive/folders/19Ib-EMh-jY6JEMdl0YXyovV8OUVUw1LO?usp=sharing

Version Information:

  • WordPress Version: 6.7.2
  • PHP Version: 8.3
  • ACF Version: ACF PRO 6.4.1
  • Browser: Chrome 136.0.7103.93

Proposed Fix
In file /wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf-input.min.js on line 2631 when unminified.

There is an issue with how Javascript handles the Math rounding on the DOM elements which therefore means there becomes a point where the if statement criteria is not met which means this.fetch() is never executed.

Reference code:

onScrollChoices: function (e) {
    if (!this.get("loading") && this.get("more")) {
         var t = this.$list("choices"),
            i = Math.ceil(t.scrollTop()),
            a = Math.ceil(t[0].scrollHeight),
            n = Math.ceil(t.innerHeight()),
            s = this.get("paged") || 1;
        i + n >= a && (this.set("paged", s + 1), this.fetch());
    }
},

To cater for math rounding issues, I suggest adding a slight mathematical buffer, so that i + n >= a && (this.set("paged", s + 1), this.fetch()); becomes:

i + n >= (a - 5) && (this.set("paged", s + 1), this.fetch());

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in /wp-content/plugins/advanced-custom-fields-pro/assets/build/js/acf-input.min.js at the unminified onScrollChoices function around line 2631, and reproduce the issue with a Relationship field containing 60+ posts on a non-retina display with Rank Math enabled. Verify that continued scrolling triggers the AJAX request for each next chunk until no items remain, using the linked videos as reference.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.