fix(HeaderContainer): use previous state

[kalbert312]

I noticed specifically on Safari on iPhone that sometimes tapping the side nav button has no effect in our app, at least on the first try.
Not sure what's causing it but taking a look at the code I believe the recommended way to update state if it depends on previous status value is to use the callback variant. My theory is that somehow our code is getting a stale reference for onClickSideNavExpand in some cases. In any case this should prevent any such issue from occurring.

On a related note I needed to do the following to handle external link clicks and closing the side nav:

import { useUpdate } from "react-use";
...
const rerender = useUpdate();
...
<SideNavLink<React.AnchorHTMLAttributes<HTMLAnchorElement>>
  href={href}
  onClick={(e) => {
    e.preventDefault();
    onClickSideNavExpand();
    rerender(); // this is required otherwise the side nav won't close
    window.open(href, "_blank", "noopener,noreferrer");
  }}
>
  Some external link
</SideNavLink>

I'm thinking it might be related to this button click issue somehow.

Changelog

Changed

• Update HeaderContainer to use previous state when changing the expanded state.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 360d51b

https://deploy-preview-7890--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 360d51b

https://deploy-preview-7890--carbon-components-react.netlify.app

[kalbert312]

After some more testing... it might be caused by slight finger movement that may be registering as a scroll and not a click. When it does happen it looks like the side nav button gets the focus/active highlight but does not open. I think this change is good to have anyway.

[tw15egan]

LGTM 👍 ✅