fix: [infinite-scroll] resolve the issue of two InfiniteScroll components reporting errors on the same page

[wuyiping0628]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Improved stability of Infinite Scroll by safely handling missing elements or unsupported attribute access, preventing potential runtime errors in edge cases.
  • Ensures graceful fallback when scroll-related attributes can’t be read, reducing unexpected crashes and improving reliability across different environments.
  • No changes to existing behavior when elements and attributes are available.

[coderabbitai]

Walkthrough

Adds guard checks before calling instance.$el.getAttribute when computing infinite-scroll options in both renderless and directive implementations. If instance.$el is missing or getAttribute isn’t a function, the attribute value is treated as null; otherwise, it calls getAttribute as before.

Changes

Cohort / File(s)	Summary
Renderless: safe getAttribute guard packages/renderless/src/common/deps/infinite-scroll.ts	Wraps access to instance.$el.getAttribute with checks for element existence and function type; falls back to null when unavailable.
Vue directive: safe getAttribute guard packages/vue-directive/src/infinite-scroll.ts	Adds identical guard in computeScrollOptions, preserving existing attribute resolution while preventing calls to undefined getAttribute.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant C as Component
  participant ISO as computeScrollOptions
  participant E as instance.$el

  C->>ISO: computeScrollOptions(attrKey)
  ISO->>ISO: Check E exists and typeof E.getAttribute === "function"
  alt Guarded path (no element / no getAttribute)
    ISO-->>C: $attrValue = null
  else Has getAttribute
    ISO->>E: getAttribute(attrKey)
    E-->>ISO: value|string|null
    ISO-->>C: $attrValue = value
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I hop through code with gentle care,
Guarding calls that weren’t there.
If getAttribute’s gone astray,
I null it out and bounce away.
Two paths safe, the scroll’s in sight—
A rabbit’s fix to make it right. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title concisely describes the bug being fixed in the infinite-scroll component by referencing the scenario of two components causing errors on the same page, which aligns with the changeset’s focus on guarding against missing getAttribute calls.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch wyp/scroll-bug-0924

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}