fix(react-keytips): remove default event prevention in useHotkeys

change/@fluentui-contrib-react-keytips-94f22220-1987-40f5-aef3-6bcf02685d96.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-keytips): remove default event prevention in useHotkeys",
+  "packageName": "@fluentui-contrib/react-keytips",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-keytips/src/hooks/useHotkeys/useHotkeys.ts

@@ -17,41 +17,39 @@ export const useHotkeys = (
 
   React.useEffect(() => {
     const handleInvokeEvent = (ev: KeyboardEvent) => {
-      hotkeys.forEach(
-        ([hotkey, handler, options = { preventDefault: true }]) => {
-          const event = (
-            'nativeEvent' in ev ? ev.nativeEvent : ev
-          ) as KeyboardEvent;
+      hotkeys.forEach(([hotkey, handler, options]) => {
+        const event = (
+          'nativeEvent' in ev ? ev.nativeEvent : ev
+        ) as KeyboardEvent;
 
-          if (!ev.key) {
-            return;
-          }
+        if (!ev.key) {
+          return;
+        }
 
-          if (isKeyMatchingKeyboardEvent(parseHotkey(hotkey), event)) {
-            if (options.preventDefault) {
-              ev.preventDefault();
-            }
+        if (isKeyMatchingKeyboardEvent(parseHotkey(hotkey), event)) {
+          if (options?.preventDefault) {
+            ev.preventDefault();
+          }
 
-            if (options.stopPropagation) {
-              ev.stopPropagation();
-            }
+          if (options?.stopPropagation) {
+            ev.stopPropagation();
+          }
 
-            // if options.delay is > 0, it will be needed to hold the sequence
-            // to fire the handler
-            if (options.delay && options.delay > 0) {
-              clearDelayTimeout();
-              activeKeys.current.add(ev.key);
-              setDelayTimeout(() => {
-                if (activeKeys.current.has(ev.key)) {
-                  handler(event);
-                }
-              }, options.delay);
-            } else {
-              handler(event);
-            }
+          // if options.delay is > 0, it will be needed to hold the sequence
+          // to fire the handler
+          if (options?.delay && options.delay > 0) {
+            clearDelayTimeout();
+            activeKeys.current.add(ev.key);
+            setDelayTimeout(() => {
+              if (activeKeys.current.has(ev.key)) {
+                handler(event);
+              }
+            }, options.delay);
+          } else {
+            handler(event);
           }
         }
-      );
+      });
     };
 
     const handleKeyUp = (ev: KeyboardEvent) => {

packages/react-keytips/stories/Default.stories.tsx

@@ -15,6 +15,13 @@ import {
   MenuPopover,
   MenuTrigger,
   SplitButton,
+  Dialog,
+  DialogTrigger,
+  DialogSurface,
+  DialogTitle,
+  DialogBody,
+  DialogActions,
+  DialogContent,
   MenuButtonProps,
   useMergedRefs,
 } from '@fluentui/react-components';
@@ -153,6 +160,18 @@ export const DefaultStory = () => {
     onExecute,
   });
 
+  const dialogButton = useKeytipRef({
+    keySequences: ['4dl'],
+    content: '4DL',
+    onExecute,
+  });
+
+  const dialogInnerButton = useKeytipRef({
+    keySequences: ['4dl', '1a'],
+    content: '1A',
+    onExecute,
+  });
+
   return (
     <div className={classes.column}>
       <div className={classes.row}>
@@ -171,6 +190,30 @@ export const DefaultStory = () => {
         <SplitButtonComponent />
       </div>
       <Button ref={offsetButton}>Button with Keytip offset</Button>
+      <Dialog>
+        <DialogTrigger disableButtonEnhancement>
+          <Button ref={dialogButton}>Open dialog</Button>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>Dialog title</DialogTitle>
+            <DialogContent>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+              exercitationem cumque repellendus eaque est dolor eius expedita
+              nulla ullam? Tenetur reprehenderit aut voluptatum impedit
+              voluptates in natus iure cumque eaque?
+            </DialogContent>
+            <DialogActions>
+              <Button appearance="primary" ref={dialogInnerButton}>
+                Do Something
+              </Button>
+              <DialogTrigger disableButtonEnhancement>
+                <Button appearance="secondary">Close</Button>
+              </DialogTrigger>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
     </div>
   );
 };