fix bug

ni · Mar 22, 2024 · f0d1ed5 · f0d1ed5
1 parent 626b6c7
commit f0d1ed5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/nimble-components/src/drawer/index.ts b/packages/nimble-components/src/drawer/index.ts
@@ -131,6 +131,12 @@ export class Drawer<CloseReason = void> 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
@@ -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();