Breadcrumbs unmount & mount its children unnecessarily

[Nifdee]

Environment

• Package version(s): Broken from @blueprintjs/core 3.19.0, works fine in 3.18.1.

Minimal repro: https://codesandbox.io/s/blueprint-sandbox-jmgju?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce (see repro linked above)

1. Render an input element for the current breadcrumb.
2. Update the state when the input value changes.
3. The input element will get unmounted and remounted on each keystroke, causing it to lose focus.

Actual behavior

Each keystroke causes a remount, which causes the input box to lose focus.

Expected behavior

Breadcrumb children don't get remounted, input box keeps focus while typing.

Possible solution

I assume this bug is caused by the react lifecycle method changes to overflow list:
https://github.com/palantir/blueprint/pull/3702/files#diff-8a0a6ef555cabf743f3603de6f56ec48R149; now that we update the state in componentDidUpdate instead of componentWillReceiveProps, the shouldComponentUpdate logic no longer works and the component updates too often.

[adidahiya]

I don't think there's anything inherently wrong with the Breadcrumbs/OverflowList components... I was able to get your example working by moving around the state management a little: https://codesandbox.io/s/blueprint-sandbox-72sqc. What do you think about this approach @Nifdee?

[adidahiya]

Also seen here: #3986

[Nifdee]

With that solution the breadcrumbs item itself doesn't get changed - I'm not sure if that's a problem in the case that led to filing this issue, but agree that your suggestion is a workaround. Thinking about this again, it's probably fine to leave this as is as we don't claim to prevent unnecessary remounts of the children.