commit 95748d159534034df92df36a073e86dfcadc04d1 · kitten.sh/use-interactions

-25

src/__tests__/useDismissable.test.tsx

···

       94
       94
        
         cy.get('@inside').should('not.be.visible');

     

       95
       95
        
       });

     

       96
       96
        
       

     

       97
       97
       -
       it('is dismissed without priority when it has focus', () => {

     

       98
       98
       -
         const Second = () => {

     

       99
       99
       -
           const ref = useRef<HTMLDivElement>(null);

     

       100
       100
       -
           useDismissable(ref, () => {});

     

       101
       101
       -
           return <div ref={ref} />;

     

       102
       102
       -
         };

     

       103
       103
       -
       

     

       104
       104
       -
         mount(

     

       105
       105
       -
           <main>

     

       106
       106
       -
             <button className="outside">outside</button>

     

       107
       107
       -
             <Dialog />

     

       108
       108
       -
             <Second />

     

       109
       109
       -
           </main>

     

       110
       110
       -
         );

     

       111
       111
       -
       

     

       112
       112
       -
         cy.get('.inside').as('inside').should('be.visible');

     

       113
       113
       -
         // not dismissed with escape press

     

       114
       114
       -
         cy.realPress('Escape');

     

       115
       115
       -
         cy.get('@inside').should('be.visible');

     

       116
       116
       -
         // is dismissed when it has focus

     

       117
       117
       -
         cy.get('@inside').focus();

     

       118
       118
       -
         cy.realPress('Escape');

     

       119
       119
       -
         cy.get('@inside').should('not.be.visible');

     

       120
       120
       -
       });

     

       121
       121
       -
       

     

       122
       97
        
       it('is dismissed when focus moves out of it, with focus loss active', () => {

     

       123
       98
        
         mount(

     

       124
       99
        
           <main>

+2 -8

src/useDismissable.ts

···

       56
       56
        
               return;

     

       57
       57
        
             }

     

       58
       58
        
       

     

       59
       59
       -
             const active = document.activeElement;

     

       60
       60
       -
             if (

     

       61
       61
       -
               event.code === 'Escape' &&

     

       62
       62
       -
               (hasPriority.current || (active && contains(element, active)))

     

       63
       63
       -
             ) {

     

       59
       59
       +
             if (event.code === 'Escape' && hasPriority.current) {

     

       64
       60
        
               // The current dialog can be dismissed by pressing escape if it either has focus

     

       65
       61
        
               // or it has priority

     

       66
       62
        
               event.preventDefault();

     
···

       72
       68
        
       

     

       73
       69
        
           function onClick(event: MouseEvent | TouchEvent) {

     

       74
       70
        
             const { target } = event;

     

       75
       75
       -
             const active = document.activeElement;

     

       76
       71
        
             if (event.defaultPrevented) {

     

       77
       72
        
               return;

     

       78
       73
        
             } else if (contains(element, target)) {

     

       79
       74
        
               willLoseFocus = false;

     

       80
       75
        
               return;

     

       81
       81
       -
             } else if (hasPriority || (active && contains(element, active))) {

     

       76
       76
       +
             } else if (hasPriority.current) {

     

       82
       77
        
               // The current dialog can be dismissed by pressing outside of it if it either has

     

       83
       78
        
               // focus or it has priority

     

       84
       84
       -
               event.preventDefault();

     

       85
       79
        
               onDismissRef.current();

     

       86
       80
        
             }

     

       87
       81
        
           }