Triggering side panel with overlay causes panel to open and close via keyboard

[oscarkwan]

Bug Report

Expected behavior

1. When triggering a sidepanel (with overlay) with any type of button, it should open and close correctly.

Current behavior

1. When triggering a sidepanel (with overlay) with a semantic button (). It opens the panel and immediately closes. This is because the sidepanel steals the focus to the (x button) and on the "onKeyUp" event it triggers the X and closes the panel. Therefore you can never open the panel with the keyboard. See sandbox below for more information.

Workaround

Use non-semantic version of the button component

Screenshots / Gifs / Codepens

https://codesandbox.io/s/sidepanel-issue-6ertl