AppSidebar emits "opened" event before the transition has finished

I have not been able to reproduce this in Chromium, but it happens almost always in Firefox.

The opened event in the AppSidebar component should be emitted when the sidebar is opened and the transition is complete. However, it seems that sometimes it is emitted while the transition is still active and the sidebar has not finished opening yet.

The problem can be noticed by opening the sidebar when the viewer is opened. The sidebar component in the Files app listens to the opened event and emits files:sidebar:opened. The viewer listens to files:sidebar:opened and, when received, it gets the sidebar offset width and adjusts its own width based on that. When the event is emitted before the transition has finished the offset width of the sidebar is smaller than its width once the transition has finished, so the viewer ends overlapping the sidebar.

If it is of any help, in Talk it is explicitly listened to ontransitionend events from the sidebar element and it works as expected.

How to test

• Use Firefox
• Add console.debug('Sidebar offset width: ' + this.$el.offsetWidth) to Sidebar.handleOpened in the Files app
• Open and close the sidebar several times in the Files app

Expected result

The offset width printed in the console is always the same (500px)

Actual result

The offset width printed in the console is different everytime, and rarely it is the expected 500px

I guess that something that may affect this test is how fast is the computer in which it is done 🤷

Start in src/components/AppSidebar/AppSidebar.vue around the opened event emission at lines 426-430. Reproduce the issue in Firefox by opening and closing the sidebar repeatedly in the Files app, using the documented console output from Sidebar.handleOpened to compare offset widths. Done means the opened event is emitted after the transition completes and the observed sidebar width is consistently 500px.