Render calls reset the search filter on the list
ramijaschek opened this issue · 13 comments
Describe the bug
When another render is caused (e.g. when something else updates on the page where the tree is shown) - the search window stays open (as it should), the text you were typing stays there (as it should) - but the filter on the list disappears (list is shown from the top) - and that's a bug. If you go to the text field and add/delete chars - search is restored as it should
To Reproduce
Place a DropdownTreeSelect on a page and set a timer to update the data shown elsewhere on the page. When the timer hits - the render is done and whatever text you were typing seems to be not impacting the list
Expected behavior
I expect all to stay the same - including the list to go on being filtered by the text in the search field after render
Screenshots
Environment (please complete the following information):
- Chrome 119.0.6045.200
- Windows 64bit
- drop-down-tree-select version 7.15.1
Additional context
Add any other context about the problem here.
I tried many solutions to fix the search after re-render issue. I tried to change the text in the search field and make it lose focus (I noticed the component replied to me switching to other apps). This worked - but only if the focus was originally on the list (not sure why - even doing a 'focus' on the input field before and with different timeouts just didn't help).
The solution currently is simple a wrapper class that has a 'shouldComponentUpdate' function set to false (you can make it a bit smarter if you need to).
The DropdownTreeSelect is fed an initial selection list and from there on is doing a nice job updating the surrounding code on changes and maintaining an internal state - so there is really no reason to re-render it (based on current testing).
Blocking the render obviously solves any problem occurring due to a render ;-)
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.
Any idea for a fix? Shouldn't be hard to do.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.
keeping alive - would really appreciate a fix.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.
keeping alive - would really appreciate a fix.
i have the same problem
ramijaschek
can you please show your solution?
Sure. Instead of using the component directly - I build a wrapper:
class DropdownTreeSelectContainer extends Component.
It's render function is simply:
return (
<DropdownTreeSelect
....
)
And I added the function:
shouldComponentUpdate(nextProps, nextState) {
return false
// This should actually logically be:
// return !_.isEqual (nextProps.selected, this.props.selected)
//
// But we have an issue where re-render of the component causes it to lose the filter in the list (scrolls to the top of
// the unfiltered list) - so we are just avoiding it. The component seems be fine without rendering at all.
}
This works for me as no updates to the underlying list are made when the screen is open - so no real reason to update from the outside.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.
As you can see above - the item bothers more people than just me.
Can this please be fixed. This is a simple item to fix and is a clear bug. Thx.