chore: update the test for dropdown button in modal

dhis2 · May 8, 2024 · d3e7770 · d3e7770
1 parent b9c59a2
commit d3e7770
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/components/button/src/dropdown-button/__tests__/dropdown-button.test.js b/components/button/src/dropdown-button/__tests__/dropdown-button.test.js
@@ -67,10 +67,14 @@ describe('<DropdownButton>', () => {
                     expect(queryByText(componentText)).not.toBeInTheDocument()
                 })
             })
-            test('closes dropdown when escape key is pressed inside modal', async () => {
-                const componentText = 'Dropdown Content'
+            test('modal remains open when dropdown button is closed on escape click', async () => {
+                const dropdownButtonText = 'Dropdown Content'
+                const headingText = 'Heading Text'
                 const modalContent = (
-                    <DropdownButton component={componentText} />
+                    <div>
+                        <h1>{headingText}</h1>
+                        <DropdownButton component={dropdownButtonText} />
+                    </div>
                 )
 
                 const { getByTestId, queryByText } = render(
@@ -85,16 +89,20 @@ describe('<DropdownButton>', () => {
                 fireEvent.click(toggleButton)
 
                 await waitFor(() => {
-                    expect(queryByText(componentText)).toBeInTheDocument()
+                    expect(queryByText(dropdownButtonText)).toBeInTheDocument()
                 })
 
                 fireEvent.keyDown(document, { key: 'Escape' })
 
                 await waitFor(() => {
-                    expect(queryByText(componentText)).not.toBeInTheDocument()
+                    expect(
+                        queryByText(dropdownButtonText)
+                    ).not.toBeInTheDocument()
+                    expect(queryByText(headingText)).toBeInTheDocument()
                 })
             })
         })
+
         describe('closed state', () => {
             const onClick = jest.fn()
             const wrapper = mount(

diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
@@ -77,11 +77,20 @@ class DropdownButton extends Component {
         document.removeEventListener('keydown', this.handleKeyDown)
     }
 
+    // handleKeyDown = (event) => {
+    //     event.preventDefault()
+    //     if (event.key === 'Escape' && this.state.open) {
+    //         event.stopPropagation()
+    //         this.setState({ open: false })
+    //     }
+    // }
+
     handleKeyDown = (event) => {
-        event.preventDefault()
-        if (event.key === 'Escape' && this.state.open) {
-            event.stopPropagation()
-            this.setState({ open: false })
+        if (event.key === 'Escape') {
+            if (this.state.open) {
+                event.stopPropagation()
+                this.setState({ open: false })
+            }
         }
     }