Skip to content

Commit

Permalink
fix: Prevent dropdown close on expand in Firefox (#231)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
ellinge authored and mrchief committed Apr 3, 2019
1 parent 05be38c commit 7439328
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 2 deletions.
6 changes: 5 additions & 1 deletion src/tree-node/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ test('notifies node toggle changes', t => {
const onChange = spy()

const wrapper = mount(<TreeNode {...node} onNodeToggle={onChange} />)
wrapper.find('.toggle').simulate('click')
const event = {
stopPropagation: spy(),
nativeEvent: { stopImmediatePropagation: spy() }
}
wrapper.find('.toggle').simulate('click', event)
t.true(onChange.calledWith('0-0-0'))
})

Expand Down
4 changes: 3 additions & 1 deletion src/tree-node/toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ class Toggle extends PureComponent {
id: PropTypes.string
}

onToggle = () => {
onToggle = e => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
this.props.onNodeToggle(this.props.id)
}

Expand Down

0 comments on commit 7439328

Please sign in to comment.