[React-UI] Aside does not cover page content with overlay

[n-srg]

TSUI v9.1.2

I got some unexpected behavior in react-Aside component.

If I handle aside state via my custom button - it closes and opens as expected. But if I close Aside with title-close button (or by clicking on the grey content overlay) - it loses grey overlay on whole page content. I created simple v4 application to exclude all side-effects, so the bug exists. I believe something going wrong with react <-> ui-spirit connection.

After dive into problem I got that ui-spirit fires onClose event twice which may be related. At least this is the case why I can't use just toggle like functions:

function toggleAside() { this.setState({isAsideOpened: !this.state.isAsideOpened }) } Fires twice, so aside keeps be closed and I need to write manual switch like: function openAside() { this.setState({isAsideOpened: true}) }; function closeAside() { this.setState({isAsideOpened: false}) }

Expected Behavior

Actual Behavior

Steps to reproduce

Can't see any better test solution except to create v4 application. You may use branch I created: Please use Apps/react-aside-overlay-bug branch.

1. Run Apps with branch I mentioned
2. Go to AppStore -> Find and Open AppActivator
3. type Tradeshift.AsideSample app name and press activate button
4. go to /apps/Tradeshift.AsideSample app, it contains only button to play with Aside component
5. Observe bugged behavior

apologize that can't provide simpler solution to reproduce it :disappointed:

[n-srg]

https://github.com/Tradeshift/Apps/tree/react-aside-overlay-bug/src/main/v4apps/apps/profile/AsideSample

[wiredearp]

Note to self: Also fix that we should not confirm Aside Panel in IE, especially not in React.