`Search`'s `selectItemOnEnter` behaves differently than its `handleItemClick` and throws if `Search` is unmounted after result selection

[spencer-brown]

Bug Report

We have a search popout that uses the Search component from this library. Unfortunately whenever our users select results using the return key, React throws memory leak errors because setState is being called on the unmounted Search component.

Steps

• Load the CodeSandbox link shared below.
• Hit the 'Search' button to render a Search component.
• Type anything to reveal the hard-coded search results.
• Hit the down arrow to select a result.
• Hit the return key to select the highlighted option. -> Observe the memory leak error.

After you see the setState error, you'll need to refresh the CodeSandbox render window in order to see it again since React will only show it once.

Expected Result

setState is not called on the unmounted Search component, as is the case when you click a result. No errors are thrown.

Actual Result

Search calls setState after it's been unmounted, resulting in React throwing a memory leak error.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Search (created by App)

Version

0.82.3

Testcase

https://codesandbox.io/s/1rn439vo04

[spencer-brown]

bump

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[spencer-brown]

yes, still would like this to be fixed