Skip to content

Kanban infinite scroll never triggers and causes duplicate cards when fixed #2550

Description

@dbadaniel

Bug Report

Title

Kanban infinite scroll never triggers and causes duplicate cards when fixed

Issue Description

The Kanban view has two related bugs. First, the infinite scroll never triggers when scrolling to the bottom of a stage column, making leads beyond the first 10 completely invisible. Second, when the scroll detection is fixed, it fires multiple times before the response returns, causing duplicate lead cards to appear in the column.

Preconditions

  1. Framework version: Laravel
  2. Krayin CRM version: 2.1.5 (image: webkul/krayin:2.1.5)
  3. Browser: Chrome 148
  4. OS: Ubuntu 24
  5. More than 10 leads in any pipeline stage

Steps to Reproduce

  1. Have more than 10 leads assigned to any pipeline stage
  2. Open the Kanban view (Leads → Kanban)
  3. Scroll to the bottom of a stage column
  4. Observe that no additional leads are loaded beyond the first 10

Expected Result

  • Scrolling to the bottom of a stage column should load the next page of leads automatically
  • Each lead should appear only once

Actual Result

  • Scrolling to the bottom does nothing — leads beyond page 1 are never loaded
  • The infinite scroll in handleScroll() uses strict equality (===) to detect the bottom:
// packages/Webkul/Admin/src/Resources/views/leads/index/kanban.blade.php
const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;

Due to sub-pixel rendering differences across browsers, this condition is never true, so append() is never called.

  • Additionally, there is no loading guard, so if the scroll does trigger, append() is called multiple times causing duplicate lead cards.

Proposed fix:

// Fix 1 — use tolerance margin
const bottom = event.target.scrollHeight - event.target.scrollTop <= event.target.clientHeight + 5;

// Fix 2 — add isLoadingMore guard in data()
isLoadingMore: false,

// Fix 3 — wrap append() call
if (this.isLoadingMore) { return; }
this.isLoadingMore = true;
this.append({...}).finally(() => { this.isLoadingMore = false; });

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions