8000 fix(Dropdown): prevent flickering on 'mousedown' rootCloseEvent (#6714) · admirhusic/react-bootstrap@a58a0cd · GitHub
[go: up one dir, main page]

Skip to content

Commit a58a0cd

Browse files
authored
fix(Dropdown): prevent flickering on 'mousedown' rootCloseEvent (react-bootstrap#6714)
* disabled mouseDown event on toggleButton of dropdown * added comments for handleToggle changes * test for rootCloseEvent
1 parent 6728619 commit a58a0cd

File tree

2 files changed

+36
-0
lines changed

2 files changed

+36
-0
lines changed

src/Dropdown.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,17 @@ const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
147147

148148
const handleToggle = useEventCallback(
149149
(nextShow: boolean, meta: ToggleMetadata) => {
150+
/** Checking if target of event is ToggleButton,
151+
* if it is then nullify mousedown event
152+
*/
153+
const isToggleButton = (
154+
meta.originalEvent?.target as HTMLElement
155+
)?.classList.contains('dropdown-toggle');
156+
157+
if (isToggleButton && meta.source === 'mousedown') {
158+
return;
159+
}
160+
150161
if (
151162
meta.originalEvent!.currentTarget === document &&
152163
(meta.source !== 'keydown' ||

test/DropdownMousedownSpec.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render, fireEvent, screen } from '@testing-library/react';
2+
import Dropdown from '../src/Dropdown';
3+
4+
describe('<Dropdown.Menu rootCloseEvent="mousedown">', () => {
5+
it('does not flicker when rootCloseEvent is set to "mousedown" and toggle button is clicked', () => {
6+
const { container } = render(
7+
<Dropdown>
8+
<Dropdown.Toggle id="dropdown-basic" data-testid="dropdown-toggle">
9+
Dropdown Button
10+
</Dropdown.Toggle>
11+
<Dropdown.Menu rootCloseEvent="mousedown">
12+
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
13+
</Dropdown.Menu>
14+
</Dropdown>,
15+
);
16+
// Click the toggle button to open the menu
17+
fireEvent.click(screen.getByTestId('dropdown-toggle'));
18+
// The menu should now be in the DOM
19+
container.firstElementChild!.classList.contains('show').should.be.true;
20+
// Click the toggle button again to close the menu
21+
fireEvent.click(screen.getByTestId('dropdown-toggle'));
22+
// The menu should no longer be in the DOM
23+
container.firstElementChild!.classList.contains('show').should.be.false;
24+
});
25+
});

0 commit comments

Comments
 (0)
0