diff --git a/components/button/src/dropdown-button/__tests__/dropdown-button.test.js b/components/button/src/dropdown-button/__tests__/dropdown-button.test.js index 164c0d3f1b..a38e8e167a 100644 --- 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('', () => { 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 = ( - +
+

{headingText}

+ +
) const { getByTestId, queryByText } = render( @@ -85,16 +89,20 @@ describe('', () => { 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 index 4fd4aa65ab..ec0cc2b337 100644 --- 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 }) + } } }