Merge pull request #275 from epilgrim/feature/close_dropdown_on_click_outside_the_element
close dropdown when click event is triggered outside the componentold
commit
d7e5aea79a
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
import ClassNames from 'classnames';
|
import ClassNames from 'classnames';
|
||||||
import Input from '../input';
|
import Input from '../input';
|
||||||
import events from '../utils/events';
|
import events from '../utils/events';
|
||||||
|
@ -30,6 +31,24 @@ class Dropdown extends React.Component {
|
||||||
up: false
|
up: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
componentWillUpdate (prevState, nextState) {
|
||||||
|
if (!prevState.active && nextState.active) {
|
||||||
|
events.addEventsToDocument({click: this.handleDocumentClick});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate (prevProps, prevState) {
|
||||||
|
if (prevState.active && !this.state.active) {
|
||||||
|
events.removeEventsFromDocument({click: this.handleDocumentClick});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDocumentClick = (event) => {
|
||||||
|
if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
|
||||||
|
this.setState({active: false});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
handleMouseDown = (event) => {
|
handleMouseDown = (event) => {
|
||||||
events.pauseEvent(event);
|
events.pauseEvent(event);
|
||||||
const client = event.target.getBoundingClientRect();
|
const client = event.target.getBoundingClientRect();
|
||||||
|
|
Loading…
Reference in New Issue