Skip to content

Commit cb38633

Browse files
ellingemrchief
authored andcommitted
fix: Prevent dropdown close on expand in Firefox (#231)
## What does it do? Prevents event bubbling on node expand-click. The function isOutsideClick only gets a short part of two items (li.node + i.expand), then the parents stop, in Firefox. This causes it to be detected as an outside click. In chrome the path is instead empty and no outside click is therefore detected. Fixes #198 Can test here (switching between v1.17/developTemp): Expand the first two nodes: ![bild](https://user-images.githubusercontent.com/17863113/55436725-5bce8b80-559d-11e9-927d-17149643100c.png) Scroll to bottom and expand: ![bild](https://user-images.githubusercontent.com/17863113/55436759-6c7f0180-559d-11e9-8bd9-7ad141b5c9ca.png) https://ellinge.github.io/react-dropdown-tree-select-test/#v117-nocheckeddefault https://ellinge.github.io/react-dropdown-tree-select-test/#DevelopTemp-nocheckeddefault There still seems to be some issue with scroll in firefox after initial scroll and expand which does not happen in chrome. The expanded item gets out of view. This also happens on scoll and check. ## Type of change - [x] Bug fix
1 parent f8eb1c3 commit cb38633

File tree

2 files changed

+8
-2
lines changed

2 files changed

+8
-2
lines changed

src/tree-node/index.test.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,11 @@ test('notifies node toggle changes', t => {
4545
const onChange = spy()
4646

4747
const wrapper = mount(<TreeNode {...node} onNodeToggle={onChange} />)
48-
wrapper.find('.toggle').simulate('click')
48+
const event = {
49+
stopPropagation: spy(),
50+
nativeEvent: { stopImmediatePropagation: spy() }
51+
}
52+
wrapper.find('.toggle').simulate('click', event)
4953
t.true(onChange.calledWith('0-0-0'))
5054
})
5155

src/tree-node/toggle.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ class Toggle extends PureComponent {
1313
id: PropTypes.string
1414
}
1515

16-
onToggle = () => {
16+
onToggle = e => {
17+
e.stopPropagation()
18+
e.nativeEvent.stopImmediatePropagation()
1719
this.props.onNodeToggle(this.props.id)
1820
}
1921

0 commit comments

Comments
 (0)