diff --git a/packages/nimble-components/src/drawer/index.ts b/packages/nimble-components/src/drawer/index.ts index 45306082c4..8870ddd27f 100644 --- a/packages/nimble-components/src/drawer/index.ts +++ b/packages/nimble-components/src/drawer/index.ts @@ -131,6 +131,12 @@ export class Drawer extends FoundationElement { } private triggerAnimation(): void { + // Read the offsetHeight of the dialog to trigger a reflow. This guarantees that the browser + // has processed the 'animating' class being removed before trying to readd it, even if the previous + // animation has just finished. Otherwise, problems can occur. For example, trying to close the + // drawer immediately after the opening animation ends does not actually close the drawer. + void this.dialog.offsetHeight; + this.dialog.classList.add('animating'); if (this.closing) { this.dialog.classList.add('closing'); diff --git a/packages/nimble-components/src/drawer/tests/drawer.spec.ts b/packages/nimble-components/src/drawer/tests/drawer.spec.ts index eefa3b0f52..632820c834 100644 --- a/packages/nimble-components/src/drawer/tests/drawer.spec.ts +++ b/packages/nimble-components/src/drawer/tests/drawer.spec.ts @@ -133,8 +133,7 @@ describe('Drawer', () => { await expectAsync(promise).toBePending(); }); - // Firefox skipped, see: https://github.com/ni/nimble/issues/1937 - it('should resolve promise if drawer completely opens before being closed #SkipFirefox', async () => { + it('should resolve promise if drawer completely opens before being closed', async () => { const promise = element.show(); await completeAnimationAsync(element); element.close();