多个模式听同一个按键，我如何处理优先级？

Question

I'm trying to figure out the logic behind a problem, I'm hoping someone has any advice on how to solve this.

The app is built with React.

This is the flow of my applications:

• Use clicks on something
• A modal pops up with a form that needs to be filled
• Once the form is filled the user clicks a "Submit" button
• A confirmation modal pops up on top of the first modal

For accessibility and usability reasons I'd like both my modals to listen for the ESC keypress, so they can be easily cancelled from the keyboard. I've implemented this and it works, but it's not great.

I do this by calling an useEffect when the component is rendered:

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.isComposing || e.keyCode === 27) {
        // close modal
      }
    };

    document.addEventListener('keydown', handler);
    return () => {
      document.removeEventListener('keydown', handler);
    };
  }, []);

The problem I'm facing is that if both modals are open and ESC is pressed, both modals will close.

How would you set priority for which modal gets closed first? I've thought about having a global modal object where I can check which modal is the latest added, but that seems needlessly complex.

Is there a simple solution I'm missing?

Here's a simple diagram explaining my problem.

Answer 1

in the handler of the first Modal check for the existance of the second Modal. If it's there, don't close the first one:)