Fix move/close menu not showing on draggable video tile when ctrl+alt+space shortcut is used (#5652)

Author: JamesBurnside

change-beta/@azure-communication-react-efaa1c36-cd40-48ac-8905-e7c88a135523.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Bug Fix: Fix move/close menu not showing on draggable video tile when ctrl+alt+space shortcut is used",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-efaa1c36-cd40-48ac-8905-e7c88a135523.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Bug Fix: Fix move/close menu not showing on draggable video tile when ctrl+alt+space shortcut is used",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/ModalClone/ModalClone.tsx

@@ -39,7 +39,6 @@ import {
   useResponsiveMode,
   ZIndexes
 } from '@fluentui/react';
-import { useWindow } from '@fluentui/react-window-provider';
 
 // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)
 
@@ -48,6 +47,13 @@ export interface _ExtendedIModalProps extends IModalProps {
   minDragPosition?: _ICoordinates;
   maxDragPosition?: _ICoordinates;
   dataUiId?: string;
+
+  /**
+   * Originally the FluentUI modal used window to capture key events that trigger the move/close menu.
+   * As we want to avoid global listeners, we are allowing the user to pass in a specific element
+   * to capture the key events.
+   */
+  keyEventElement?: HTMLElement | Window;
 }
 
 const animationDuration = AnimationVariables.durationValue2;
@@ -84,7 +90,7 @@ const DEFAULT_PROPS: Partial<_ExtendedIModalProps> = {
 
 const getModalClassNames = classNamesFunction<IModalStyleProps, IModalStyles>();
 
-const getMoveDelta = (ev: React.KeyboardEvent<HTMLElement>): number => {
+const getMoveDelta = (ev: KeyboardEvent): number => {
   let delta = 10;
   if (ev.shiftKey) {
     if (!ev.ctrlKey) {
@@ -144,7 +150,8 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
       onDismissed,
       minDragPosition,
       maxDragPosition,
-      dataUiId
+      dataUiId,
+      keyEventElement = window
     } = props;
 
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -156,16 +163,17 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
 
     const focusTrapZoneId = useId('ModalFocusTrapZone');
 
-    const win = useWindow();
-
     const { setTimeout, clearTimeout } = useSetTimeout();
 
     const [isModalOpen, setIsModalOpen] = React.useState(isOpen);
     const [isVisible, setIsVisible] = React.useState(isOpen);
     const [coordinates, setCoordinates] = React.useState<_ICoordinates>(ZERO);
     const [modalRectangleTop, setModalRectangleTop] = React.useState<number | undefined>();
 
-    const [isModalMenuOpen, { toggle: toggleModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);
+    const [isModalMenuOpen, { setTrue: setModalMenuOpen, setFalse: setModalMenuClose }] = useBoolean(false);
+
+    const [_, forceUpdate] = React.useState(0);
+    const forceUpdateCallback = React.useCallback(() => forceUpdate((prev) => prev + 1), []);
 
     const internalState = useConst<IModalInternalState>(() => ({
       onModalCloseTimer: 0,
@@ -192,7 +200,7 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
       topOffsetFixed,
       isModeless,
       layerClassName,
-      windowInnerHeight: win?.innerHeight,
+      windowInnerHeight: window?.innerHeight,
       isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector
     });
 
@@ -300,7 +308,8 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
     const handleEnterKeyboardMoveMode = () => {
       // We need a global handleKeyDown event when we are in the move mode so that we can
       // handle the key presses and the components inside the modal do not get the events
-      const handleKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
+      const handleKeyDown = (event: Event): void => {
+        const ev = event as KeyboardEvent;
         if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {
           // CTRL + ALT + SPACE is handled during keyUp
           ev.preventDefault();
@@ -315,6 +324,7 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
 
         if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {
           internalState.isInKeyboardMoveMode = false;
+          forceUpdateCallback();
           ev.preventDefault();
           ev.stopPropagation();
         }
@@ -364,10 +374,9 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
       internalState.lastSetCoordinates = coordinates;
       setModalMenuClose();
       internalState.isInKeyboardMoveMode = true;
-
-      internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);
+      keyEventElement.addEventListener('keydown', handleKeyDown, true /* useCapture */);
       internalState.disposeOnKeyDown = () => {
-        internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);
+        keyEventElement.removeEventListener('keydown', handleKeyDown, true /* useCapture */);
         internalState.disposeOnKeyDown = undefined;
       };
     };
@@ -379,22 +388,23 @@ const ModalBase: React.FunctionComponent<_ExtendedIModalProps> = React.forwardRe
     };
 
     const registerForKeyUp = (): void => {
-      const handleKeyUp = (ev: React.KeyboardEvent<HTMLElement>): void => {
+      const handleKeyUp = (event: Event): void => {
+        const ev = event as KeyboardEvent;
         // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:
         // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
         if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {
           if (elementContains(internalState.scrollableContent, ev.target as HTMLElement)) {
-            toggleModalMenuOpen();
+            setModalMenuOpen();
             ev.preventDefault();
             ev.stopPropagation();
           }
         }
       };
 
       if (!internalState.disposeOnKeyUp) {
-        internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);
+        keyEventElement.addEventListener('keyup', handleKeyUp, true /* useCapture */);
         internalState.disposeOnKeyUp = () => {
-          internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);
+          keyEventElement.removeEventListener('keyup', handleKeyUp, true /* useCapture */);
           internalState.disposeOnKeyUp = undefined;
         };
       }