When we click something in the header that isn't a button or link, the click will propagate down to the body and so focus leaves this element. Previously we were using that as an indication that the drawer should be closed. So what we do now to work around this is that on mouse down: flip a flag, and mouse up: reset it. This prevents the element from closing but we still want to close it on actual clicks outside, so we use useClickOutside to handle those. Otherwise if you move focus out of the element by tabbing, we still close.
Closes GRO-1720
A bit unintuitive but, to summarize:
When we click something in the header that isn't a button or link, the click will propagate down to the body and so focus leaves this element. Previously we were using that as an indication that the drawer should be closed. So what we do now to work around this is that on mouse down: flip a flag, and mouse up: reset it. This prevents the element from closing but we still want to close it on actual clicks outside, so we use
useClickOutside
to handle those. Otherwise if you move focus out of the element by tabbing, we still close.