Datatable: Horizontal scroller with selection/checkbox resets to initial position on clicking row

[indra-sen-morrisonsplc]

Describe the bug

While clicking anywhere in the DataTable component with a checkbox/selection, the horizontal scroller automatically resets to it's initial position when clicked anywhere on the row item. Ideally the click should not reset the scroller position.

Reproducer

https://codesandbox.io/s/beautiful-moser-3ovqg6

PrimeReact version

8.3.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

1. Create a DataTable component with selection/checkbox
2. Make sure that it has enough columns to have a horizontal scroller
3. Drag the horizontal scroller towards right to shift the initial content a little bit.
4. Now click anywhere on the row, the horizontal scroller will automatically reset to initial position.

Expected behavior

The Scroller should not reset it's position when clicked on any row item.

[melloware]

Please create a Code Sandbox reproducer else we cannot debug: https://codesandbox.io/s/primereact-test-forked-bbns8k

[indra-sen-morrisonsplc]

Sandbox Created. https://codesandbox.io/s/serene-nightingale-j3s1iy?file=/src/demo/DataTableSelectionDemo.js

Follow these steps to reproduce :

1. Reduce the window size so that the Data Table gets a horizontal scroller.
2. Now scroll the horizontal scroller completely to the right.
3. Now click on any row item, the scroller will reset itself completely towards the left.

[indra-sen-morrisonsplc]

Hello All, I have opened a new defect/issue #3158 https://github.com/primefaces/primereact/issues/3158. I have also attached the code sandbox https://codesandbox.io/s/serene-nightingale-j3s1iy?file=/src/demo/DataTableSelectionDemo.js link here as well on github as well. Please take a look. Thanks and Regards, Indrasen

On Sat, 13 Aug 2022 at 17:21, Melloware @.***> wrote:

Closed #3155 https://github.com/primefaces/primereact/issues/3155 as completed.

— Reply to this email directly, view it on GitHub https://github.com/primefaces/primereact/issues/3155#event-7183278408, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2P3JVA24GNJ5KOKWHUFYS3VY6D4VANCNFSM56LTQ3PQ . You are receiving this because you authored the thread.Message ID: @.***>

--

Please note that Wm Morrison Supermarkets PLC is now Wm Morrison Supermarkets Limited. Please amend your records accordingly.

Wm Morrison Supermarkets Limited is registered in England with number 358949. The registered office of the company is situated at Gain Lane, Bradford, West Yorkshire BD3 7DL. This email and any attachments are intended for the addressee(s) only and may be confidential.

If you are not the intended recipient, please inform the sender by replying to the email that you have received in error and then destroy the email.  If you are not the intended recipient, you must not use, disclose, copy or rely on the email or its attachments in any way.

This email does not constitute a contract in writing for the purposes of the Law of Property (Miscellaneous Provisions) Act 1989.

Our Standard Terms and Conditions of Purchase, as may be amended from time to time, apply to any contract that we enter into. The current version of our Standard Terms and Conditions of Purchase is available at:http://www.morrisons.co.uk/gscop http://www.morrisons.co.uk/gscop

Although we have taken steps to ensure the email and its attachments are virus-free, we cannot guarantee this or accept any responsibility, and it is the responsibility of recipients to carry out their own virus checks.

[indra-sen-morrisonsplc]

@melloware @mertsincan Hello Folks. Can you please suggest any workaround for this defect ?

[melloware]

I am not quite sure why it behaves that way. I suggest if you guys need more support to look into PRO support I am just an open source volunteer.

[indra-sen-morrisonsplc]

Ok @melloware @mertsincan Any links or portal to connect with the PRO support ?

[melloware]

Also reported by another user in 9.3.1 with reproducer: https://codesandbox.io/s/rvjdmq?file=/package.json

[melloware]

Describe the bug

If using a Datatable in with selectionMode="multiple" causes horizontal "scrolljump" if an Item is selected.

Reproducer

https://stackblitz.com/edit/vitejs-vite-t4glxh?file=package-lock.json,src%2FApp.jsx

PrimeReact version

10.5.1

React version

18.x

Steps to reproduce the behavior

1. Go to Reproducer
2. Resize the Preview/Webcontainer so the DatatableTable gets horizontal scrollable
3. Scroll to the right
4. Select an Element

=> The table resets the horizontal scroll back to completely left

Expected behavior

The Scroll position stays the same even on select as it is on vertical scroll

[sja-cslab]

@melloware

The Reason for that behavior lies inside the TableBody.js : 456 - focusOnElement called by TableBody.js : 299- onMultipleSelection .

There you got that snipped:

if (isCheckboxSelectionModeInColumn) {
    const checkbox = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');

    checkbox && checkbox.focus();
}

Here checkbox.focus() is the reason why vertical scroll is resetted to left.

The question here is, if it's intended to set focus on an element that has been clicked or if you should add an identifier for keyboard navigation or something.

Edit: I noticed that tabbing through the table already scrolls the table. The only thing I could find, were focus on click seems to work, is clicking an element that is half outside of the table. Then that element scrolled into tableBody Center - if enough scroll space is available.

[melloware]

That makes sense. I assume it was done for a usability or accessibility reason?

[sja-cslab]

I'm not sure what the original idea was; however, I cannot see any value for it here. As mentioned, if you use keyboard navigation, the table already focuses on the current item.

[melloware]

@sja-cslab feel free to submit a PR removing those lines.