fix(ui-a11y-utils): fix modal closing when losing focus

Closes: INSTUI-3790
instructure · Jul 14, 2023 · 5deda70 · 5deda70
1 parent 4f54935
commit 5deda70
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/packages/ui-a11y-utils/src/FocusRegion.ts b/packages/ui-a11y-utils/src/FocusRegion.ts
@@ -139,7 +139,7 @@ class FocusRegion {
           addEventListener(doc, 'mousedown', this.captureDocumentClick, true)
         )
         this._listeners.push(
-          addEventListener(doc, 'mousedown', this.handleDocumentClick)
+          addEventListener(doc, 'click', this.handleDocumentClick)
         )
 
         Array.from(doc.getElementsByTagName('iframe')).forEach((el) => {

diff --git a/packages/ui-color-picker/src/ColorPicker/__tests__/ColorPicker.test.tsx b/packages/ui-color-picker/src/ColorPicker/__tests__/ColorPicker.test.tsx
@@ -648,6 +648,7 @@ describe('<ColorPicker />', () => {
 
       const colorButtons = await cp.findColorPresetButtons()
 
+      await colorButtons[1].mouseDown()
       await colorButtons[1].click()
 
       const addButton = await popoverContent.findPopoverButtonWithText('add')
@@ -705,6 +706,7 @@ describe('<ColorPicker />', () => {
 
       const colorButtons = await cp.findColorPresetButtons()
 
+      await colorButtons[1].mouseDown()
       await colorButtons[1].click()
 
       const addButton = await popoverContent.findPopoverButtonWithText('add')
@@ -1012,6 +1014,7 @@ describe('<ColorPicker />', () => {
 
       const colorButtons = await cp.findColorPresetButtons()
 
+      await colorButtons[1].mouseDown()
       await colorButtons[1].click()
 
       const addButton = await popoverContent.findPopoverButtonWithText('add')
@@ -1070,6 +1073,7 @@ describe('<ColorPicker />', () => {
 
       const colorButtons = await cp.findColorPresetButtons()
 
+      await colorButtons[1].mouseDown()
       await colorButtons[1].click()
 
       const addButton = await popoverContent.findPopoverButtonWithText('add')

diff --git a/packages/ui-dialog/src/Dialog/__tests__/Dialog.test.tsx b/packages/ui-dialog/src/Dialog/__tests__/Dialog.test.tsx
@@ -119,7 +119,7 @@ describe('<Dialog />', async () => {
       expect(dialog.containsFocus()).to.be.true()
     })
 
-    await within(dialog.getOwnerDocument().documentElement).mouseDown()
+    await within(dialog.getOwnerDocument().documentElement).click()
 
     await wait(() => {
       expect(onDismiss).to.have.been.called()

diff --git a/packages/ui-menu/src/Menu/__tests__/Menu.test.tsx b/packages/ui-menu/src/Menu/__tests__/Menu.test.tsx
@@ -639,9 +639,7 @@ describe('<Menu />', async () => {
       })
 
       onToggle.resetHistory()
-      await wrapQueryResult(
-        trigger.getOwnerDocument().documentElement
-      ).mouseDown()
+      await wrapQueryResult(trigger.getOwnerDocument().documentElement).click()
 
       expect(onToggle).to.have.been.called()
       expect(onToggle.getCall(0).args[0]).to.equal(false)

diff --git a/packages/ui-modal/src/Modal/__tests__/Modal.test.tsx b/packages/ui-modal/src/Modal/__tests__/Modal.test.tsx
@@ -240,7 +240,7 @@ describe('<Modal />', async () => {
       expect(modal.containsFocus()).to.be.true()
     })
 
-    await (within(modal.getOwnerDocument().documentElement) as any).mouseDown()
+    await (within(modal.getOwnerDocument().documentElement) as any).click()
 
     await wait(() => {
       expect(onDismiss).to.have.been.called()
@@ -494,7 +494,7 @@ describe('<Modal />', async () => {
     await btn.click()
 
     // to trigger the modal to close
-    await (within(modal.getOwnerDocument().documentElement) as any).mouseDown()
+    await (within(modal.getOwnerDocument().documentElement) as any).click()
 
     expect(handleDissmiss).to.have.been.calledWith(1)
   })

diff --git a/packages/ui-popover/src/Popover/__tests__/Popover.test.tsx b/packages/ui-popover/src/Popover/__tests__/Popover.test.tsx
@@ -88,9 +88,7 @@ describe('<Popover />', async () => {
     await wait(() => {
       expect(content.containsFocus()).to.be.true()
     })
-    await wrapQueryResult(
-      trigger.getOwnerDocument().documentElement
-    ).mouseDown()
+    await wrapQueryResult(trigger.getOwnerDocument().documentElement).click()
 
     content = await popover.findContent({ expectEmpty: true })