File tree Expand file tree Collapse file tree 2 files changed +9
-14
lines changed Expand file tree Collapse file tree 2 files changed +9
-14
lines changed Original file line number Diff line number Diff line change @@ -40,38 +40,33 @@ export default function useDropdownMenu(itemCount: number) {
4040 moveFocus ( 0 ) ;
4141 }
4242
43-
4443 // This function is designed to handle every click
4544 const handleEveryClick = ( event : MouseEvent ) => {
4645 // Ignore if the menu isn't open
4746 if ( ! isOpen ) {
4847 return ;
4948 }
50-
49+
5150 // Make this happen asynchronously
5251 setTimeout ( ( ) => {
5352 // Type guard
5453 if ( ! ( event . target instanceof Element ) ) {
5554 return ;
5655 }
57-
58-
56+
5957 // Ignore if we're clicking inside the menu
6058 if ( event . target . closest ( '[role="menu"]' ) ) {
6159 return ;
6260 }
63-
64-
61+
6562 // Hide dropdown
6663 setIsOpen ( false ) ;
6764 } , 10 ) ;
6865 } ;
69-
70-
66+
7167 // Add listener
7268 document . addEventListener ( 'click' , handleEveryClick ) ;
73-
74-
69+
7570 // Return function to remove listener
7671 return ( ) => document . removeEventListener ( 'click' , handleEveryClick ) ;
7772 } , [ isOpen ] ) ;
Original file line number Diff line number Diff line change @@ -31,7 +31,7 @@ it('focuses on the first menu item when the enter key is pressed', async () => {
3131it ( 'focuses on the menu button after pressing escape' , async ( ) => {
3232 await page . click ( '#menu-button' ) ;
3333 await menuOpen ( ) ;
34-
34+
3535 await keyboard . down ( 'Escape' ) ;
3636 await menuClosed ( ) ;
3737
@@ -41,7 +41,7 @@ it('focuses on the menu button after pressing escape', async () => {
4141it ( 'focuses on the next item in the tab order after pressing tab' , async ( ) => {
4242 await page . click ( '#menu-button' ) ;
4343 await menuOpen ( ) ;
44-
44+
4545 await keyboard . down ( 'Tab' ) ;
4646 await menuClosed ( ) ;
4747
@@ -51,7 +51,7 @@ it('focuses on the next item in the tab order after pressing tab', async () => {
5151it ( 'focuses on the previous item in the tab order after pressing shift-tab' , async ( ) => {
5252 await page . click ( '#menu-button' ) ;
5353 await menuOpen ( ) ;
54-
54+
5555 await keyboard . down ( 'Shift' ) ;
5656 await keyboard . down ( 'Tab' ) ;
5757 await menuClosed ( ) ;
@@ -62,7 +62,7 @@ it('focuses on the previous item in the tab order after pressing shift-tab', asy
6262it ( 'closes the menu if you click outside of it' , async ( ) => {
6363 await page . click ( '#menu-button' ) ;
6464 await menuOpen ( ) ;
65-
65+
6666 await page . click ( 'body' ) ;
6767 await menuClosed ( ) ; // times out if menu doesn't close
6868
You can’t perform that action at this time.
0 commit comments