Tearsheet: Escape should only close the active topmost layer #989

Activity

1. patternfly-build

   added this to PatternFly Issueson Oct 2, 2026
2. github-project-automation

   moved this to Needs triage in PatternFly Issueson Oct 2, 2026
3. thatblindgeye commented on Oct 2, 2026

   

   thatblindgeye

   on Oct 2, 2026

   Contributor

   More actions

   Hi @nickmazzi . At the moment it should be possible to tweak the Escape press behavior via the onEscapePress prop on Tearsheet/Modal, similar to our Modal with Dropdown example. in that example we're checking if the Dropdowwn is open (if it is, we can assume focus is on/in the dropdown or its toggle) and closing the MenuToggle only on Escape, otherwise we close the Modal.

   Our base Modal by default uses whatever is passed to the onClose prop for its Escape key press logic, and adds an eventlistener, so that'd explain partially why Escape is closing all the modals/tearsheets.

   For the Stacked Tearsheet example that was added in #954, I added the following:

     const onEscapePress = (event: KeyboardEvent) => {
       event.stopImmediatePropagation();
       if (isStack2TearsheetOpen) {
         toggleStack2Tearsheet(event);
       } else if (isStack1TearsheetOpen) {
         toggleStack1Tearsheet(event);
       } else {
         toggleTearsheet(event);
       }
     };
   

   And passed onEscapePress={onEscapePress} to each Tearsheet in that example and Escape only closed the immediate layer (only passed onEscapePress to the "base" or lowest level Tearsheet also worked fine since it's all being fired off the onkeydown eventlistener). Not the prettiest, but something like that should work whether you're dealing with only Tearsheets or Tearsheets and Modals like you described.

   I think if we were to try and finagle the code on the PatternFly side, it'd have to be in our React repo on the Modal component, since Tearsheet is just using our Modal component.
4. GAUNSD commented on Oct 2, 2026

   

   GAUNSD

   on Oct 2, 2026

   Contributor

   More actions

   Now it's just a question of whether we add this implementation to the <Modal/> or to the <Tearsheet/>. That, or leave it up to consumers to decide on the behaviour