Kanban violates CLS metric

[parag sharma]

In Syncfustion KanbanComponent, while picking the Card for dragging purposes, the Card unexpectedly moves & sticks to the bottom right corner of the cursor. This sudden shifting of the Card while picking seems to be violating the Cumulative Layout Shift metric. If we take an example of Gitlab boards, Notions Kanban boards etc, a card is not shifting from its actual position when we pick it for dragging purposes.

Example:

Card Picking in Syncfustion vs Card Picking in Gitlab boards

Is this behavior is by default in KanbanComponent or do we have some properties for changing this behavior in KanbanComponent?

[Vinitha Jeyakumar]

Hi Parag, 

 

 

Currently, we are validating your reported query. We will update you the further details soon. 

 

Regards, 

Vinitha 

[Vinitha Jeyakumar]

Hi Parag, 

 

 

We have validated your query “Kanban violates CLS metric” 

 

We want to let you know that, when we pick a card for drag and drop, the card moves to the bottom right corner of the cursor and it is the behavior of the Kanban component. The cursor denotes the area where we going to drop the card. 

 

Please let us know if you have any concerns. 

 

Regards, 

Vinitha 

[Tushar Goswami]

Vinitha,

IMHO this a usability bug in Syncfusion. If this cannot be resolved, we would have to consider some other solution

[Vinitha Jeyakumar]

Hi Parag, 

 

 

Good day to you, 

 

 

We have further validated your query “IMHO this a usability bug in Syncfusion. If this cannot be resolved, we would have to consider some other solution”. 

 

We want to let you know that this is not a bug and it’s our Kanban component behavior. But if you want to change this cursor behavior, you can use the below customized code to get the requirement you expected. In which we set the property enableTailMode as false in the dataBound event of Kanban to get your requirement. Please check the code below, 

 

Code snippet: 

<KanbanComponent id="Kanban” dataBound={this.onDataBound}> 

    . . .  

</KanbanComponent> 

onDataBound(args) 

    { 

        let card = this.element.querySelectorAll('.e-card'); 

        let length = card.length; 

        for (let i = 0; i < length; i++) 

        { 

            card[i].ej2_instances[0].enableTailMode = false; 

        } 

    } 

 

Sample: https://stackblitz.com/edit/react-qqssww?file=index.js 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha