getSortedRowModel interferes with resizer

[AlexandrosGounis]

Describe the bug

When using getSortedRowModel in useReactTable with resizing, one triggers the other and an endless loop of events happens, preventing both actions and ultimately freezing.

Your minimal, reproducible example

https://0tkbm5.sse.codesandbox.io/

Steps to reproduce

Here is what I am using:

 const table = useReactTable({
        // ...
        columnResizeMode: 'onChange',
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(), //... removing this fixes the issue
        // ...
    })

Expected behavior

Rendering a th:

<th {...{ key: header.id, colSpan: header.colSpan, style: { width: header.getSize() } }}>
        {header.isPlaceholder ? null : (
            <div
                data-id={index}
                {...{
                    className: header.column.getCanSort()
                        ? 'cursor-pointer select-none'
                        : '',
                    onClick: header.column.getToggleSortingHandler(),
                }}
            >
                {flexRender(header.column.columnDef.header, header.getContext())}
                {{
                    asc: 'A',
                    desc: 'D',
                }[header.column.getIsSorted() as string] ?? null}
            </div>
        )}
        <div
            {...{
                onMouseDown: header.getResizeHandler(),
                onTouchStart: header.getResizeHandler(),
                className: `${styles.resizer} ${header.column.getIsResizing() ? styles.isResizing : ''}`,
                style: {
                    transform: ''
                },
            }}
        />
</th>

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

everywhere

react-table version

v8.7.6

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[trnvmkhl]

Same issue

[DoroninDmitrii]

The same problem

[muhaimincs]

same here

[norbertorok92]

@AlexandrosGounis try to wrap your resizer handler like the code below. It solved my problem

{header.column.getCanResize() && (
<div
            {...{
                onMouseDown: header.getResizeHandler(),
                onTouchStart: header.getResizeHandler(),
                className: `${styles.resizer} ${header.column.getIsResizing() ? styles.isResizing : ''}`,
                style: {
                    transform: ''
                },
            }}
        />
)}