[RAC] - Table block `onMouseDown` event

[nirtamir2]

Provide a general summary of the issue here

https://stackblitz.com/edit/stackblitz-starters-7cefch?file=src%2FTestTable.tsx

When using an element that calls onMouseDown inside the table header (for example when implementing resize columns) - the event is not called when clicking left mouse click on the button.

🤔 Expected Behavior?

onMouseDown will be called

😯 Current Behavior

onMouseDown won't call

💁 Possible Solution

Make onMouseDown call. Add option to opt-in / out this behavior if its required

🔦 Context

I want to create column resizer but onMouseDown does not call. See react-table example https://tanstack.com/table/v8/docs/examples/react/column-sizing this implementation does not work with react-aria-components

🖥️ Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-7cefch?file=src%2FTestTable.tsx Try clicking on the red buttons in the table header. Make sure onMouseDown called. If we press the same button outside the table header - it will be called

Version

"react-aria-components": "1.0.0-alpha.6"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Could you implement column resizing with https://react-spectrum.adobe.com/react-aria/Table.html#column-resizing instead?

[nirtamir2]

Could you implement column resizing with react-spectrum.adobe.com/react-aria/Table.html#column-resizing instead?

Not exactly. I use @tanstack/table for the column pinning - so I have to update the column state of @tanstack/table every time - which is not ideal. The column width state sits in @tanstack/table and I don't think I can easily access it from react-aria-components

[snowystinger]

Just to clarify, what is column pinning?

[nirtamir2]

Just to clarify, what is column pinning?

It's the ability to make the column static and move it to the start. Useful when we have a horizontal scroll and we want this column to be visible while editing other columns. https://tanstack.com/table/v8/docs/api/features/column-pinning

[snowystinger]

Thanks, I'll bring it up in our next planning to see what we'd like to recommend here or if there's something we need to support

[snowystinger]

Chatted with the team, and there were a couple of points brought up.

Could you use onPointerDown instead of onMouseDown? Because we prevent default on pointer down, the mouse events, which are compatibility events anyway, are prevented.

Other things of note, we think it's possible to implement the column resizing using the examples and docs I sent you and then only use tanstack for the column management to make a pinned one. Another thing is we could consider the addition of a pinned column as a feature to our library, though the timeline on that would likely be long.