[GH #2068] Filter method moves cell focus to top

Tags: #<Tag:0x00007efc71a26790> #<Tag:0x00007efc71a26600>
#1

Hello,

When I use the filter() method in filters plugin, the table re-renders and the cell focus / selected cell pointer moves to the top row of the column. I’m fine with the re-render but I would like the pointer to behave normally. How do I achieve this?

In the example I did not add any filter conditions for simplicity but the behavior is same when conditions are added.

Steps to reproduce:

  1. edit any cell and press enter
  2. table re-renders & cell focus moves to the top row
#2

Hi @hjeong1200

Thank you for reporting this. It seems that there’s a general issue with updating the React’s state inside the functional component. We already have similar issue reported for the wrong behavior with the dropdownMenu, and your issue is also causes by state manipulation, but in this case in the afterChange hook. That causes the problem with not only selection going back to the top, but also with no saving any changes.

I added your scenario to the issue I reported as they are most likely connected. I will keep you updated about the status of the issue.

#3

Hi @adrian.szymanski,

  1. I have found another issue probably connected to it. Setting state automatically closes the filter dropdown menu. Could you please add this as a test case as well?
    https://stackblitz.com/edit/react-qqnhtc-8susq2?file=src%2FExampleComponent.jsx

  2. Using filter is the primary reason that we have purchased the license. However, the issue that I have previously posted is preventing us from adding the feature. Could you please check for any workaround for this issue?

#4

Hi @hjeong1200

I mentioned this issue in my previous message as that was also reported on our GitHub, it’s added to the issue I created. There no workarounds available at the moment. I’ll let you know as soon as I have more information on this issue status.