Clicking inside a filter box triggers sort direction

[yaronlevi]

Hi (-:

I must be doing something wrong here.
I am using both useSortBy and useFilters on the same table:

When clicking inside the input box, it triggers the sort direction. Even clicking outside the input box, anywhere inside the cell, triggers the sort.

How can I make it so that only when you click the label column name it triggers the sort direction?

This is the code for the head part:

import React from 'react';

export function TableHead({ headerGroups }) {
    return <thead>
        {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                    <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                        <div style={{ height: 30, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} >
                            {column.render('Header')}
                            <div style={{ width: 20 }} >{column.isSorted ? column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}</div>
                        </div>
                        <div style={{ marginBottom: 10 }} >{column.canFilter ? column.render('Filter') : null}</div>
                    </th>
                ))}
            </tr>
        ))}
    </thead>
}

[tannerlinsley]

Answered here: #2058

[yaronlevi]

Thank You!
This is the new code after the fix:

export function TableHead({ headerGroups }) {
    return <thead>
        {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                    <th {...column.getHeaderProps()}>
                        <div {...column.getSortByToggleProps()} style={{ cursor:'pointer', height: 30, display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }} >
                            {column.render('Header')}
                            <div style={{ width: 20 }} >{column.isSorted ? column.isSortedDesc ? ' 🔽' : ' 🔼' : ''}</div>
                        </div>
                        <div style={{ marginBottom: 10 }} >{column.canFilter ? column.render('Filter') : null}</div>
                    </th>
                ))}
            </tr>
        ))}
    </thead>
}

[victorkvarghese]

@tannerlinsley is this answer valid for v8 version ?

i'm getting same issue, event bubbling happens when i click anywhere on cell or filter popover.

i tried adding getSortByToggleProps, but getting error "type doesnt exist"

[victorkvarghese]

@tannerlinsley Attaching code for reference

"@tanstack/react-table": "^8.2.6",

Sorting trigger on any click events inside cell / popover components inside

I was also getting issue on resize, but i prevented it by stopPropagtion(). But If i click anywhere on filter popover sorting is triggered

  <StyledTableCell
      onClick={header.column.getToggleSortingHandler()}
      colSpan={header.colSpan}
      style={{
        width: header.getSize(),
      }}
    >
      <div className="head-wrapper">
        {header.isPlaceholder ? null : flexRender(renderDefaultHeader(header), header.getContext())}
        <SortIcon canSort={header.column.getCanSort()} getIsSorted={header.column.getIsSorted() as string} />
        // any click on this component triggers sorting
        <Filter canFilter={header.column.getCanFilter()} />
        {dividerNeeded && (
          <StyledResizer
            // added to prevent event bubbling
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
            }}
            onKeyPress={e => {
              e.preventDefault();
              e.stopPropagation();
            }}
            role="button"
            tabIndex={0}
            {...{
              onMouseDown: header.getResizeHandler(),
              onTouchStart: header.getResizeHandler(),
              className: getResizerStyle(header),
              style: {
                transform:
                  columnResizeMode === 'onEnd' && header.column.getIsResizing() ? `translateX(${deltaOffset}px)` : '',
              },
            }}
          >
            <StyledDivider />
          </StyledResizer>
        )}
      </div>
    </StyledTableCell>

UPDATE: Added by wrapping a div that restricts event propagation

 <div
          onClick={e => {
            e.stopPropagation();
          }}
          onKeyPress={e => {
            e.stopPropagation();
          }}
          role="button"
          tabIndex={0}
        >
          <Filter canFilter={header.column.getCanFilter()} />
        </div>