isDismissable and other properties are not working correctly on modal box

[JHunnicutt]

I'm working on some modal implementation using useModalOverlay. After some time getting it to work in a TypeScript environment, I've noticed that there a couple of things that don't function like the examples. First and foremost, the property isDismissable isn't enabling my modal to close when the user clicks outside of it. Also, the esc key doesn't close the modal at all.

The docs are very confusing on the subject, as it states, "you can set isDismissable on the Modal" but then shows an example with the property on the trigger. I put mine on the trigger, as I gave more weight to the coding example.

I have a couple of CodeSandboxes with some examples. The first one is in TypeScript and close to what I've created thus far. I've just used the examples as shown from the docs as a starting point. The second is essentially the same thing but in vanilla JavaScript. Notice how isDismissable doesn't work in the TS example, but it does in JS? Clicking the esc key doesn't close the modal in either example, sadly. Why might this be?

useModalOverlay - TypeScript
useModalOverlay - JavaScript

[majornista]

isDismissable would need to be passed through as a prop to useModalOverlay in your Modal definition and be included in your type definition for ModalDefinitions. As it is, it gets left on the cutting room floor here:

function ModalTrigger({
  label,
  children,
  isDismissable,
  ...props
}: TriggerDefinitions) {
  let state = useOverlayTriggerState(props);
  let { triggerProps, overlayProps } = useOverlayTrigger(
    { type: "dialog" },
    state
  );
  console.log(state.isOpen);

  return (
    <>
      <Button {...triggerProps}>{label}</Button>
      {state.isOpen && (
        <Modal {...props} state={state}>
          {cloneElement(children(state.close), overlayProps)}
        </Modal>
      )}
    </>
  );
}

You can fix this by updating this:

interface ModalDefinitions {
  state: OverlayTriggerState;
  children: React.ReactElement | React.ReactElement[];
  isDismissable?: boolean; 
}

and passing isDismissable as a prop to the Modal:

function ModalTrigger({
  label,
  children,
  isDismissable,
  ...props
}: TriggerDefinitions) {
  let state = useOverlayTriggerState(props);
  let { triggerProps, overlayProps } = useOverlayTrigger(
    { type: "dialog" },
    state
  );
  console.log(state.isOpen);

  return (
    <>
      <Button {...triggerProps}>{label}</Button>
      {state.isOpen && (
        <Modal {...props} isDismissable state={state}>
          {cloneElement(children(state.close), overlayProps)}
        </Modal>
      )}
    </>
  );
}

[majornista]

You should also make use of useDialog to ensure proper role and manage focus within the Dialog following the example here: https://react-spectrum.adobe.com/react-aria/useModalOverlay.html#dialog. As they currently are, the dialogs in your examples don't receive and trap focus, which is why it would seem that the Escape key doesn't work.

[majornista]

Fixed example: https://codesandbox.io/s/usemodaloverlay-ts-forked-c5f4s3?file=/src/components/ModalButton.tsx

[JHunnicutt]

I don't think I could thank you enough for your tips and I'd send you a gift card if I could. Your pointers all make sense in context and I understand where I fell off the trail.

I'm considering filling out a feature request for a docs update that could make some of this information a little more explicit. I was thinking that their use of a Dialog element was more or less optional, but I didn't realize that the container needed to manage focus, as the docs seem to indicate that the Overlay from the parent Modal element would handle that.