Using Hotkey when dialog is open

[cubecleveland]

Hello,
io have a use case where dialogs are opened through the app but there are also alot of hot keys that can be pressed to route the applicaiton to another url.

How can i still use the hot keys once the dialog is open and elegnatly close it before rerouting ?

[indiesquidge]

@cubecleveland I'm not sure I fully understand your question or how it relates to Reach UI, can you help me understand a bit better by providing more details? A CodeSandbox showing what you're trying to achieve would be most helpful. Are you saying your app has global event listeners for your hot keys? Hot keys specific to the dialog being open that allow you re-route?

Almost every Reach UI component composes internal event handlers with their respective props, so you should be able to add your own onClick/onKeyDown/onMouseDown/etc and still keep things working. Since the dialog's open state is controlled by the app developer via isOpen and onClose, you should be able to call onClose in your own event handler to dismiss the dialog.

If you're referring to a global event listener that controls your hot keys, that might be trickier depending on how you've set up your app. Using something like useHook's useEventListener or Jamie Kyle's tinykeys as an example, you could set something up within the component that renders your dialog like this:

function Example() {
  const [showDialog, setShowDialog] = React.useState(false);

  useEffect(() => {
    let unsubscribe = tinykeys(window, {
      "Shift+D": () => { // or whatever your global hot key binding is…
        setShowDialog(false);
        // transition to new url…
      },
    });
    return () => {
      unsubscribe();
    };
  });

  return (
    <div>
      <button onClick={() => setShowDialog(true)}>Show Dialog</button>
      <Dialog
        aria-label="Announcement"
        isOpen={showDialog}
        onDismiss={() => setShowDialog(false)}
      >
        <button onClick={() => setShowDialog(false)}>Close Dialog</button>
      </Dialog>
    </div>
  );
}

Here's a rudimentary example of this solution.

[cubecleveland]

We are almost on the same page. I have global hotkeys on the app that allowes me to reroute the app to certain views. I want to disable all of them when a dialog is open so the dialog will lock the app. then when u complete your operation in the dialog the hotkeys go back to actions.. Does that make sense ? CUBE Workspace Corporate: 6240 Som Center Rd #130 Solon, OH 44139 T: 216.245.9629

…

On Wed, Aug 4, 2021 at 6:12 PM Austin Wood ***@***.***> wrote: @cubecleveland <https://github.com/cubecleveland> I'm not sure I fully understand your question or how it relates to Reach UI, can you help me understand a bit better by providing more details? A CodeSandbox <https://codesandbox.io/s/reach-ui-template-xonfs> showing what you're trying to achieve would be most helpful. Are you saying your app has global event listeners for your hot keys? Hot keys specific to the dialog being open that allow you re-route? Almost every Reach UI component composes <https://github.com/reach/reach-ui/blob/7059b23e12546796a054704c38983e3e422ef506/packages/dialog/src/index.tsx#L214-L216> internal event handlers with their respective props, so you should be able to add your own onClick/onKeyDown/onMouseDown/etc and still keep things working. Since the dialog's open state is controlled by the app developer via isOpen and onClose, you should be able to call onClose in your own event handler to dismiss the dialog. If you're referring to a global event listener that controls your hot keys, that might be trickier depending on how you've set up your app. Using something like useHook's useEventListener <https://usehooks.com/useEventListener/> or Jamie Kyle's tinykeys <https://github.com/jamiebuilds/tinykeys#react-hooks-example> as an example, you could set something up within the component that renders your dialog like this: function Example() { const [showDialog, setShowDialog] = React.useState(false); useEffect(() => { let unsubscribe = tinykeys(window, { "Shift+D": () => { // or whatever your global hot key binding is… setShowDialog(false); // transition to new url… }, }); return () => { unsubscribe(); }; }); return ( <div> <button onClick={() => setShowDialog(true)}>Show Dialog</button> <Dialog aria-label="Announcement" isOpen={showDialog} onDismiss={() => setShowDialog(false)} > <button onClick={() => setShowDialog(false)}>Close Dialog</button> </Dialog> </div> ); } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#825 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMKORZUFSR5W52MACTGXSDDT3G3K3ANCNFSM5BRWLG4A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[indiesquidge]

Thanks for your reply @cubecleveland! In your original post you say "how can i still use the hot keys once the dialog is open" but in your latest reply you mention "I want to disable all of [the hot keys] when a dialog is open so the dialog will lock the app". Still hard to know for certain what your issue is without a code example, but it sounds like you want your global hot keys to be aware of the dialog's open state. This won't be something specific to Reach UI's Dialog, as its dependent on how your global listeners are setup, but you'll likely want your dialog's state to live beyond the component that renders it, perhaps in context, Redux, or some other state management that can be consumed by both your listeners and your dialog component.

[cubecleveland]

Super idea!!! Do u have an example for that ? maybe also something i can transfer dynamic content to the dialog in the context ? CUBE Workspace Corporate: 6240 Som Center Rd #130 Solon, OH 44139 T: 216.245.9629

…

On Fri, Aug 6, 2021 at 11:20 AM Austin Wood ***@***.***> wrote: Thanks for your reply @cubecleveland <https://github.com/cubecleveland>! In your original post you say "how can i still use the hot keys once the dialog is open" but in your latest reply you mention "I want to disable all of [the hot keys] when a dialog is open so the dialog will lock the app". Still hard to know for certain what your issue is without a code example, but it sounds like you want your global hot keys to be aware of the dialog's open state. This won't be something specific to Reach UI's Dialog, as its dependent on how your global listeners are setup, but you'll likely want your dialog's state to live beyond the component that renders it, perhaps in context <https://reactjs.org/docs/context.html>, Redux, or some other state management that can be consumed by other parts of your app. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#825 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMKORZVU4ZKURAED7HV4X63T3P4STANCNFSM5BRWLG4A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .