fix(ui-a11y-utils): make Modal stay open when button is clicked in certain configurations

INSTUI-4483

Author: ToMESSKa

cypress/component/Modal.cy.tsx

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 import React, { useState } from 'react'
-import { Modal, View } from '../../packages/ui'
+import { Modal, View, Button } from '@instructure/ui'
+import 'cypress-real-events'
 
 import '../support/component'
 
@@ -105,4 +106,69 @@ describe('<Modal/>', () => {
     cy.get('body').click(0, 0)
     cy.wrap(handleDismissSpy).should('have.been.calledOnceWith', 1)
   })
+
+  it('should not close when button is clicked to rerender content', () => {
+    const TestModal = () => {
+      const [isOpen, setIsOpen] = useState(false)
+      const [state, setState] = useState({
+        content:
+          'This content should change by clicking on the Change content button',
+        isButtonVisible: true
+      })
+
+      return (
+        <div>
+          <Button onClick={() => setIsOpen(true)}>Open the Modal</Button>
+
+          {isOpen && (
+            <Modal
+              label="label"
+              open
+              onDismiss={() => setIsOpen(false)}
+              shouldCloseOnDocumentClick
+            >
+              <Modal.Body>
+                <div data-testid="modal-content">{state.content}</div>
+                {state.isButtonVisible && (
+                  <Button
+                    onClick={() =>
+                      setState({
+                        content: 'The content has changed!',
+                        isButtonVisible: false
+                      })
+                    }
+                    data-testid="change-content-button"
+                  >
+                    Change content
+                  </Button>
+                )}
+                <Button
+                  data-testid="close-button"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Close
+                </Button>
+              </Modal.Body>
+            </Modal>
+          )}
+        </div>
+      )
+    }
+
+    cy.mount(<TestModal />)
+
+    cy.contains('Open the Modal').realClick()
+
+    cy.get('[data-testid="modal-content"]').should('be.visible')
+
+    cy.get('[data-testid="change-content-button"]')
+      .realClick()
+      .then(() => cy.get('[data-testid="modal-content"]').should('be.visible'))
+
+    cy.get('[data-testid="close-button"]').should('be.visible')
+
+    cy.get('[data-testid="close-button"]').realClick()
+
+    cy.get('[data-testid="modal-content"]').should('not.exist')
+  })
 })

packages/ui-a11y-utils/src/FocusRegion.ts

@@ -45,7 +45,8 @@ class FocusRegion {
   private readonly _id: string
   private _listeners: ReturnType<typeof addEventListener>[] = []
   private _active = false
-  private _documentMouseDownTarget: Node | null = null
+  private _documentClickTarget: Node | null = null
+  private _contextContainsTarget = false
 
   constructor(element: Element | Node | null, options: FocusRegionOptions) {
     this._options = options || {
@@ -83,17 +84,19 @@ class FocusRegion {
   }
 
   captureDocumentMousedown = (event: React.MouseEvent) => {
-    // FocusRegion can be activated after mousedown but before click so this is not guaranteed to fire.
-    this._documentMouseDownTarget = event.target as Node
+    this._documentClickTarget = event.target as Node
+    this._contextContainsTarget = contains(
+      this._contextElement,
+      this._documentClickTarget
+    )
   }
 
   handleDocumentClick = (event: React.PointerEvent) => {
     if (
       this._options.shouldCloseOnDocumentClick &&
       event.button === 0 &&
       event.detail > 0 && // if event.detail is 0 then this is a keyboard and not a mouse press
-      this._documentMouseDownTarget !== null &&
-      !contains(this._contextElement, this._documentMouseDownTarget)
+      !this._contextContainsTarget
     ) {
       this.handleDismiss(event, true)
     }