From fced1639bfa782d35002a23b8e9211e4ae19ffb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 10:46:24 -0600 Subject: [PATCH 1/7] fix to selected state --- dist/index.js | 128 +++++++++++++++++++------------------- index.js | 167 ++++++++++++++++++++++++++++---------------------- 2 files changed, 159 insertions(+), 136 deletions(-) diff --git a/dist/index.js b/dist/index.js index d8920f6..2b34170 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; Object.defineProperty(exports, "__esModule", { value: true @@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _react = require('react'); +var _react = require("react"); var _react2 = _interopRequireDefault(_react); -var _reactDom = require('react-dom'); +var _reactDom = require("react-dom"); var _reactDom2 = _interopRequireDefault(_reactDom); -var _classnames = require('classnames'); +var _classnames = require("classnames"); var _classnames2 = _interopRequireDefault(_classnames); @@ -28,7 +28,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var DEFAULT_PLACEHOLDER_STRING = 'Select...'; +var DEFAULT_PLACEHOLDER_STRING = "Select..."; var Dropdown = function (_Component) { _inherits(Dropdown, _Component); @@ -41,7 +41,7 @@ var Dropdown = function (_Component) { _this.state = { selected: props.value || { label: props.placeholder || DEFAULT_PLACEHOLDER_STRING, - value: '' + value: "" }, isOpen: false }; @@ -54,33 +54,35 @@ var Dropdown = function (_Component) { } _createClass(Dropdown, [{ - key: 'componentWillReceiveProps', + key: "componentWillReceiveProps", value: function componentWillReceiveProps(newProps) { if (newProps.value && newProps.value !== this.state.selected) { this.setState({ selected: newProps.value }); } else if (!newProps.value && newProps.placeholder) { - this.setState({ selected: { label: newProps.placeholder, value: '' } }); + this.setState({ selected: { label: newProps.placeholder, value: "" } }); } else if (!newProps.value) { - this.setState({ selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' } }); + this.setState({ + selected: { label: DEFAULT_PLACEHOLDER_STRING, value: "" } + }); } } }, { - key: 'componentDidMount', + key: "componentDidMount", value: function componentDidMount() { - document.addEventListener('click', this.handleDocumentClick, false); - document.addEventListener('touchend', this.handleDocumentClick, false); - document.addEventListener('keydown', this.handleKeyPressEvent, false); + document.addEventListener("click", this.handleDocumentClick, false); + document.addEventListener("touchend", this.handleDocumentClick, false); + document.addEventListener("keydown", this.handleKeyPressEvent, false); } }, { - key: 'componentWillUnmount', + key: "componentWillUnmount", value: function componentWillUnmount() { this.mounted = false; - document.removeEventListener('click', this.handleDocumentClick, false); - document.removeEventListener('touchend', this.handleDocumentClick, false); - document.removeEventListener('keydown', this.handleKeyPressEvent, false); + document.removeEventListener("click", this.handleDocumentClick, false); + document.removeEventListener("touchend", this.handleDocumentClick, false); + document.removeEventListener("keydown", this.handleKeyPressEvent, false); } }, { - key: 'handleDocumentClick', + key: "handleDocumentClick", value: function handleDocumentClick(event) { if (this.mounted) { if (!_reactDom2.default.findDOMNode(this).contains(event.target)) { @@ -89,24 +91,23 @@ var Dropdown = function (_Component) { } } }, { - key: 'handleKeyPressEvent', + key: "handleKeyPressEvent", value: function handleKeyPressEvent(e) { if (e.keyCode === 27) { this.setState({ isOpen: false }); } } }, { - key: 'fireChangeEvent', + key: "fireChangeEvent", value: function fireChangeEvent(newState) { if (newState.selected !== this.state.selected && this.props.onChange) { this.props.onChange(newState.selected); } } }, { - key: 'handleMouseDown', + key: "handleMouseDown", value: function handleMouseDown(event) { - - if (event.type === 'mousedown' && event.button !== 0) return; + if (event.type === "mousedown" && event.button !== 0) return; event.stopPropagation(); event.preventDefault(); @@ -117,18 +118,18 @@ var Dropdown = function (_Component) { } } }, { - key: 'handleDropdownFocus', + key: "handleDropdownFocus", value: function handleDropdownFocus() { this.setState({ isOpen: true }); } }, { - key: 'handleDropdownBlur', + key: "handleDropdownBlur", value: function handleDropdownBlur(e) { var stayOpen = false; if (e.relatedTarget === this.dropdownButton) { stayOpen = true; } else if (this.dropdownMenu) { - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); for (var i = 0; i < options.length; i++) { if (e.relatedTarget === options[i]) { stayOpen = true; @@ -138,23 +139,23 @@ var Dropdown = function (_Component) { this.setState({ isOpen: stayOpen }); } }, { - key: 'handleDropdownKeyDown', + key: "handleDropdownKeyDown", value: function handleDropdownKeyDown(e) { if (e.keyCode == 40) { e.preventDefault(); - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); options.length && options[0].focus(); } } }, { - key: 'handleOptionKeyDown', + key: "handleOptionKeyDown", value: function handleOptionKeyDown(e, value, label) { if (e.keyCode == 32 || e.keyCode == 13) { e.preventDefault(); this.setValue(value, label); } else if (e.keyCode == 38 || e.keyCode == 40) { e.preventDefault(); - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); for (var i = 0; i < options.length; i++) { if (options[i] === e.target) { e.keyCode == 38 && i > 0 && options[i - 1].focus(); @@ -164,35 +165,36 @@ var Dropdown = function (_Component) { } } }, { - key: 'setValue', + key: "setValue", value: function setValue(value, label) { var newState = { selected: { value: value, label: label }, - isOpen: false + isOpen: true }; this.fireChangeEvent(newState); this.dropdownButton.focus(); - this.setState(newState); + this.setState(function () { + return newState; + }); } }, { - key: 'renderOption', + key: "renderOption", value: function renderOption(option) { var _classNames, _this2 = this; - var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected), _classNames)); + var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + "-option", true), _defineProperty(_classNames, "is-selected", option === this.state.selected.value || option === this.state.selected), _classNames)); var value = option.value || option.label || option; var label = option.label || option.value || option; - return _react2.default.createElement( - 'div', + "div", { - role: 'menuitem', - tabIndex: this.props.tabIndex || '0', + role: "menuitem", + tabIndex: this.props.tabIndex || "0", key: value, className: optionClass, onMouseDown: function onMouseDown() { @@ -212,7 +214,7 @@ var Dropdown = function (_Component) { ); } }, { - key: 'buildMenu', + key: "buildMenu", value: function buildMenu() { var _this3 = this; @@ -221,10 +223,10 @@ var Dropdown = function (_Component) { baseClassName = _props.baseClassName; var ops = options.map(function (option) { - if (option.type === 'group') { + if (option.type === "group") { var groupTitle = _react2.default.createElement( - 'div', - { className: baseClassName + '-title' }, + "div", + { className: baseClassName + "-title" }, option.name ); var _options = option.items.map(function (item) { @@ -232,8 +234,8 @@ var Dropdown = function (_Component) { }); return _react2.default.createElement( - 'div', - { className: baseClassName + '-group', key: option.name }, + "div", + { className: baseClassName + "-group", key: option.name }, groupTitle, _options ); @@ -243,47 +245,47 @@ var Dropdown = function (_Component) { }); return ops.length ? ops : _react2.default.createElement( - 'div', - { className: baseClassName + '-noresults' }, - 'No options found' + "div", + { className: baseClassName + "-noresults" }, + "No options found" ); } }, { - key: 'render', + key: "render", value: function render() { var _this4 = this, _classNames2; var baseClassName = this.props.baseClassName; - var disabledClass = this.props.disabled ? 'Dropdown-disabled' : ''; - var placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label; + var disabledClass = this.props.disabled ? "Dropdown-disabled" : ""; + var placeHolderValue = typeof this.state.selected === "string" ? this.state.selected : this.state.selected.label; var value = _react2.default.createElement( - 'div', - { className: baseClassName + '-placeholder' }, + "div", + { className: baseClassName + "-placeholder" }, placeHolderValue ); var menu = this.state.isOpen ? _react2.default.createElement( - 'div', + "div", { ref: function ref(el) { _this4.dropdownMenu = el; }, - className: baseClassName + '-menu' + className: baseClassName + "-menu" }, this.buildMenu() ) : null; - var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + '-root', true), _defineProperty(_classNames2, 'is-open', this.state.isOpen), _classNames2)); + var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + "-root", true), _defineProperty(_classNames2, "is-open", this.state.isOpen), _classNames2)); return _react2.default.createElement( - 'div', + "div", { className: dropdownClass }, _react2.default.createElement( - 'div', + "div", { - tabIndex: this.props.tabIndex || '0', - role: 'menu', + tabIndex: this.props.tabIndex || "0", + role: "menu", ref: function ref(el) { _this4.dropdownButton = el; }, @@ -293,7 +295,7 @@ var Dropdown = function (_Component) { onBlur: function onBlur(e) { return _this4.handleDropdownBlur(e); }, - className: baseClassName + '-control ' + disabledClass, + className: baseClassName + "-control " + disabledClass, onMouseDown: function onMouseDown(e) { return _this4.handleMouseDown(e); }, @@ -305,7 +307,7 @@ var Dropdown = function (_Component) { } }, value, - _react2.default.createElement('span', { className: baseClassName + '-arrow' }) + _react2.default.createElement("span", { className: baseClassName + "-arrow" }) ), menu ); @@ -315,5 +317,5 @@ var Dropdown = function (_Component) { return Dropdown; }(_react.Component); -Dropdown.defaultProps = { baseClassName: 'Dropdown' }; +Dropdown.defaultProps = { baseClassName: "Dropdown" }; exports.default = Dropdown; diff --git a/index.js b/index.js index 29eddb6..8d7da16 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,16 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import classNames from 'classnames'; +import React, { Component } from "react"; +import ReactDOM from "react-dom"; +import classNames from "classnames"; -const DEFAULT_PLACEHOLDER_STRING = 'Select...'; +const DEFAULT_PLACEHOLDER_STRING = "Select..."; class Dropdown extends Component { - constructor (props) { + constructor(props) { super(props); this.state = { selected: props.value || { label: props.placeholder || DEFAULT_PLACEHOLDER_STRING, - value: '' + value: "" }, isOpen: false }; @@ -21,30 +21,32 @@ class Dropdown extends Component { this.handleKeyPressEvent = this.handleKeyPressEvent.bind(this); } - componentWillReceiveProps (newProps) { + componentWillReceiveProps(newProps) { if (newProps.value && newProps.value !== this.state.selected) { - this.setState({selected: newProps.value}); + this.setState({ selected: newProps.value }); } else if (!newProps.value && newProps.placeholder) { - this.setState({selected: { label: newProps.placeholder, value: '' }}); - } else if (!newProps.value){ - this.setState({selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' }}); + this.setState({ selected: { label: newProps.placeholder, value: "" } }); + } else if (!newProps.value) { + this.setState({ + selected: { label: DEFAULT_PLACEHOLDER_STRING, value: "" } + }); } } - componentDidMount () { - document.addEventListener('click', this.handleDocumentClick, false); - document.addEventListener('touchend', this.handleDocumentClick, false); - document.addEventListener('keydown', this.handleKeyPressEvent, false); + componentDidMount() { + document.addEventListener("click", this.handleDocumentClick, false); + document.addEventListener("touchend", this.handleDocumentClick, false); + document.addEventListener("keydown", this.handleKeyPressEvent, false); } - componentWillUnmount () { + componentWillUnmount() { this.mounted = false; - document.removeEventListener('click', this.handleDocumentClick, false); - document.removeEventListener('touchend', this.handleDocumentClick, false); - document.removeEventListener('keydown', this.handleKeyPressEvent, false); + document.removeEventListener("click", this.handleDocumentClick, false); + document.removeEventListener("touchend", this.handleDocumentClick, false); + document.removeEventListener("keydown", this.handleKeyPressEvent, false); } - handleDocumentClick (event) { + handleDocumentClick(event) { if (this.mounted) { if (!ReactDOM.findDOMNode(this).contains(event.target)) { this.setState({ isOpen: false }); @@ -52,21 +54,20 @@ class Dropdown extends Component { } } - handleKeyPressEvent(e){ - if(e.keyCode === 27){ + handleKeyPressEvent(e) { + if (e.keyCode === 27) { this.setState({ isOpen: false }); } } - fireChangeEvent (newState) { + fireChangeEvent(newState) { if (newState.selected !== this.state.selected && this.props.onChange) { this.props.onChange(newState.selected); } } - handleMouseDown (event) { - - if (event.type === 'mousedown' && event.button !== 0) return; + handleMouseDown(event) { + if (event.type === "mousedown" && event.button !== 0) return; event.stopPropagation(); event.preventDefault(); @@ -77,18 +78,20 @@ class Dropdown extends Component { } } - handleDropdownFocus(){ + handleDropdownFocus() { this.setState({ isOpen: true }); } - handleDropdownBlur(e){ + handleDropdownBlur(e) { let stayOpen = false; - if(e.relatedTarget === this.dropdownButton){ + if (e.relatedTarget === this.dropdownButton) { stayOpen = true; - } else if(this.dropdownMenu){ - const options = this.dropdownMenu.getElementsByClassName(`${this.props.baseClassName}-option`); - for(var i=0; i 0 && options[i-1].focus(); - e.keyCode == 40 && i < options.length - 1 && options[i+1].focus(); + const options = this.dropdownMenu.getElementsByClassName( + `${this.props.baseClassName}-option` + ); + for (var i = 0; i < options.length; i++) { + if (options[i] === e.target) { + e.keyCode == 38 && i > 0 && options[i - 1].focus(); + e.keyCode == 40 && i < options.length - 1 && options[i + 1].focus(); } } } } - setValue (value, label) { + setValue(value, label) { let newState = { selected: { value, label }, - isOpen: false + isOpen: true }; this.fireChangeEvent(newState); this.dropdownButton.focus(); - this.setState(newState); + this.setState(() => newState); } - renderOption (option) { + renderOption(option) { let optionClass = classNames({ [`${this.props.baseClassName}-option`]: true, - 'is-selected': option === this.state.selected, + "is-selected": + option === this.state.selected.value || option === this.state.selected }); let value = option.value || option.label || option; let label = option.label || option.value || option; - return (
this.setValue(value, label)} @@ -158,12 +165,14 @@ class Dropdown extends Component { ); } - buildMenu () { + buildMenu() { let { options, baseClassName } = this.props; - let ops = options.map((option) => { - if (option.type === 'group') { - let groupTitle = (
{option.name}
); - let _options = option.items.map((item) => this.renderOption(item)); + let ops = options.map(option => { + if (option.type === "group") { + let groupTitle = ( +
{option.name}
+ ); + let _options = option.items.map(item => this.renderOption(item)); return (
@@ -176,34 +185,47 @@ class Dropdown extends Component { } }); - return ops.length ? ops :
No options found
; + return ops.length ? ( + ops + ) : ( +
No options found
+ ); } - render () { + render() { const { baseClassName } = this.props; - const disabledClass = this.props.disabled ? 'Dropdown-disabled' : ''; - const placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label; - let value = (
{placeHolderValue}
); + const disabledClass = this.props.disabled ? "Dropdown-disabled" : ""; + const placeHolderValue = + typeof this.state.selected === "string" + ? this.state.selected + : this.state.selected.label; + let value = ( +
{placeHolderValue}
+ ); let menu = this.state.isOpen ? ( -
{ this.dropdownMenu = el; }} - className={`${baseClassName}-menu`} - > - {this.buildMenu()} -
- ) : null; +
{ + this.dropdownMenu = el; + }} + className={`${baseClassName}-menu`} + > + {this.buildMenu()} +
+ ) : null; let dropdownClass = classNames({ [`${baseClassName}-root`]: true, - 'is-open': this.state.isOpen + "is-open": this.state.isOpen }); return (
{ this.dropdownButton = el; }} + ref={el => { + this.dropdownButton = el; + }} onFocus={() => this.handleDropdownFocus()} onBlur={e => this.handleDropdownBlur(e)} className={`${baseClassName}-control ${disabledClass}`} @@ -218,8 +240,7 @@ class Dropdown extends Component {
); } - } -Dropdown.defaultProps = { baseClassName: 'Dropdown' }; +Dropdown.defaultProps = { baseClassName: "Dropdown" }; export default Dropdown; From 673a8a077b676f99a518079ce87c2e4486d597bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 10:59:25 -0600 Subject: [PATCH 2/7] fixing quotes --- dist/index.js | 118 +++++++++++++++++++++++++------------------------- index.js | 44 +++++++++---------- 2 files changed, 81 insertions(+), 81 deletions(-) diff --git a/dist/index.js b/dist/index.js index 2b34170..c29df3c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; Object.defineProperty(exports, "__esModule", { value: true @@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _react = require("react"); +var _react = require('react'); var _react2 = _interopRequireDefault(_react); -var _reactDom = require("react-dom"); +var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); -var _classnames = require("classnames"); +var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); @@ -28,7 +28,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var DEFAULT_PLACEHOLDER_STRING = "Select..."; +var DEFAULT_PLACEHOLDER_STRING = 'Select...'; var Dropdown = function (_Component) { _inherits(Dropdown, _Component); @@ -41,7 +41,7 @@ var Dropdown = function (_Component) { _this.state = { selected: props.value || { label: props.placeholder || DEFAULT_PLACEHOLDER_STRING, - value: "" + value: '' }, isOpen: false }; @@ -54,35 +54,35 @@ var Dropdown = function (_Component) { } _createClass(Dropdown, [{ - key: "componentWillReceiveProps", + key: 'componentWillReceiveProps', value: function componentWillReceiveProps(newProps) { if (newProps.value && newProps.value !== this.state.selected) { this.setState({ selected: newProps.value }); } else if (!newProps.value && newProps.placeholder) { - this.setState({ selected: { label: newProps.placeholder, value: "" } }); + this.setState({ selected: { label: newProps.placeholder, value: '' } }); } else if (!newProps.value) { this.setState({ - selected: { label: DEFAULT_PLACEHOLDER_STRING, value: "" } + selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' } }); } } }, { - key: "componentDidMount", + key: 'componentDidMount', value: function componentDidMount() { - document.addEventListener("click", this.handleDocumentClick, false); - document.addEventListener("touchend", this.handleDocumentClick, false); - document.addEventListener("keydown", this.handleKeyPressEvent, false); + document.addEventListener('click', this.handleDocumentClick, false); + document.addEventListener('touchend', this.handleDocumentClick, false); + document.addEventListener('keydown', this.handleKeyPressEvent, false); } }, { - key: "componentWillUnmount", + key: 'componentWillUnmount', value: function componentWillUnmount() { this.mounted = false; - document.removeEventListener("click", this.handleDocumentClick, false); - document.removeEventListener("touchend", this.handleDocumentClick, false); - document.removeEventListener("keydown", this.handleKeyPressEvent, false); + document.removeEventListener('click', this.handleDocumentClick, false); + document.removeEventListener('touchend', this.handleDocumentClick, false); + document.removeEventListener('keydown', this.handleKeyPressEvent, false); } }, { - key: "handleDocumentClick", + key: 'handleDocumentClick', value: function handleDocumentClick(event) { if (this.mounted) { if (!_reactDom2.default.findDOMNode(this).contains(event.target)) { @@ -91,23 +91,23 @@ var Dropdown = function (_Component) { } } }, { - key: "handleKeyPressEvent", + key: 'handleKeyPressEvent', value: function handleKeyPressEvent(e) { if (e.keyCode === 27) { this.setState({ isOpen: false }); } } }, { - key: "fireChangeEvent", + key: 'fireChangeEvent', value: function fireChangeEvent(newState) { if (newState.selected !== this.state.selected && this.props.onChange) { this.props.onChange(newState.selected); } } }, { - key: "handleMouseDown", + key: 'handleMouseDown', value: function handleMouseDown(event) { - if (event.type === "mousedown" && event.button !== 0) return; + if (event.type === 'mousedown' && event.button !== 0) return; event.stopPropagation(); event.preventDefault(); @@ -118,18 +118,18 @@ var Dropdown = function (_Component) { } } }, { - key: "handleDropdownFocus", + key: 'handleDropdownFocus', value: function handleDropdownFocus() { this.setState({ isOpen: true }); } }, { - key: "handleDropdownBlur", + key: 'handleDropdownBlur', value: function handleDropdownBlur(e) { var stayOpen = false; if (e.relatedTarget === this.dropdownButton) { stayOpen = true; } else if (this.dropdownMenu) { - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); for (var i = 0; i < options.length; i++) { if (e.relatedTarget === options[i]) { stayOpen = true; @@ -139,23 +139,23 @@ var Dropdown = function (_Component) { this.setState({ isOpen: stayOpen }); } }, { - key: "handleDropdownKeyDown", + key: 'handleDropdownKeyDown', value: function handleDropdownKeyDown(e) { if (e.keyCode == 40) { e.preventDefault(); - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); options.length && options[0].focus(); } } }, { - key: "handleOptionKeyDown", + key: 'handleOptionKeyDown', value: function handleOptionKeyDown(e, value, label) { if (e.keyCode == 32 || e.keyCode == 13) { e.preventDefault(); this.setValue(value, label); } else if (e.keyCode == 38 || e.keyCode == 40) { e.preventDefault(); - var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + "-option"); + var options = this.dropdownMenu.getElementsByClassName(this.props.baseClassName + '-option'); for (var i = 0; i < options.length; i++) { if (options[i] === e.target) { e.keyCode == 38 && i > 0 && options[i - 1].focus(); @@ -165,7 +165,7 @@ var Dropdown = function (_Component) { } } }, { - key: "setValue", + key: 'setValue', value: function setValue(value, label) { var newState = { selected: { @@ -181,20 +181,20 @@ var Dropdown = function (_Component) { }); } }, { - key: "renderOption", + key: 'renderOption', value: function renderOption(option) { var _classNames, _this2 = this; - var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + "-option", true), _defineProperty(_classNames, "is-selected", option === this.state.selected.value || option === this.state.selected), _classNames)); + var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected.value || option === this.state.selected), _classNames)); var value = option.value || option.label || option; var label = option.label || option.value || option; return _react2.default.createElement( - "div", + 'div', { - role: "menuitem", - tabIndex: this.props.tabIndex || "0", + role: 'menuitem', + tabIndex: this.props.tabIndex || '0', key: value, className: optionClass, onMouseDown: function onMouseDown() { @@ -214,7 +214,7 @@ var Dropdown = function (_Component) { ); } }, { - key: "buildMenu", + key: 'buildMenu', value: function buildMenu() { var _this3 = this; @@ -223,10 +223,10 @@ var Dropdown = function (_Component) { baseClassName = _props.baseClassName; var ops = options.map(function (option) { - if (option.type === "group") { + if (option.type === 'group') { var groupTitle = _react2.default.createElement( - "div", - { className: baseClassName + "-title" }, + 'div', + { className: baseClassName + '-title' }, option.name ); var _options = option.items.map(function (item) { @@ -234,8 +234,8 @@ var Dropdown = function (_Component) { }); return _react2.default.createElement( - "div", - { className: baseClassName + "-group", key: option.name }, + 'div', + { className: baseClassName + '-group', key: option.name }, groupTitle, _options ); @@ -245,47 +245,47 @@ var Dropdown = function (_Component) { }); return ops.length ? ops : _react2.default.createElement( - "div", - { className: baseClassName + "-noresults" }, - "No options found" + 'div', + { className: baseClassName + '-noresults' }, + 'No options found' ); } }, { - key: "render", + key: 'render', value: function render() { var _this4 = this, _classNames2; var baseClassName = this.props.baseClassName; - var disabledClass = this.props.disabled ? "Dropdown-disabled" : ""; - var placeHolderValue = typeof this.state.selected === "string" ? this.state.selected : this.state.selected.label; + var disabledClass = this.props.disabled ? 'Dropdown-disabled' : ''; + var placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label; var value = _react2.default.createElement( - "div", - { className: baseClassName + "-placeholder" }, + 'div', + { className: baseClassName + '-placeholder' }, placeHolderValue ); var menu = this.state.isOpen ? _react2.default.createElement( - "div", + 'div', { ref: function ref(el) { _this4.dropdownMenu = el; }, - className: baseClassName + "-menu" + className: baseClassName + '-menu' }, this.buildMenu() ) : null; - var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + "-root", true), _defineProperty(_classNames2, "is-open", this.state.isOpen), _classNames2)); + var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + '-root', true), _defineProperty(_classNames2, 'is-open', this.state.isOpen), _classNames2)); return _react2.default.createElement( - "div", + 'div', { className: dropdownClass }, _react2.default.createElement( - "div", + 'div', { - tabIndex: this.props.tabIndex || "0", - role: "menu", + tabIndex: this.props.tabIndex || '0', + role: 'menu', ref: function ref(el) { _this4.dropdownButton = el; }, @@ -295,7 +295,7 @@ var Dropdown = function (_Component) { onBlur: function onBlur(e) { return _this4.handleDropdownBlur(e); }, - className: baseClassName + "-control " + disabledClass, + className: baseClassName + '-control ' + disabledClass, onMouseDown: function onMouseDown(e) { return _this4.handleMouseDown(e); }, @@ -307,7 +307,7 @@ var Dropdown = function (_Component) { } }, value, - _react2.default.createElement("span", { className: baseClassName + "-arrow" }) + _react2.default.createElement('span', { className: baseClassName + '-arrow' }) ), menu ); @@ -317,5 +317,5 @@ var Dropdown = function (_Component) { return Dropdown; }(_react.Component); -Dropdown.defaultProps = { baseClassName: "Dropdown" }; +Dropdown.defaultProps = { baseClassName: 'Dropdown' }; exports.default = Dropdown; diff --git a/index.js b/index.js index 8d7da16..d6e439a 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,8 @@ -import React, { Component } from "react"; -import ReactDOM from "react-dom"; -import classNames from "classnames"; +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import classNames from 'classnames'; -const DEFAULT_PLACEHOLDER_STRING = "Select..."; +const DEFAULT_PLACEHOLDER_STRING = 'Select...'; class Dropdown extends Component { constructor(props) { @@ -10,7 +10,7 @@ class Dropdown extends Component { this.state = { selected: props.value || { label: props.placeholder || DEFAULT_PLACEHOLDER_STRING, - value: "" + value: '' }, isOpen: false }; @@ -25,25 +25,25 @@ class Dropdown extends Component { if (newProps.value && newProps.value !== this.state.selected) { this.setState({ selected: newProps.value }); } else if (!newProps.value && newProps.placeholder) { - this.setState({ selected: { label: newProps.placeholder, value: "" } }); + this.setState({ selected: { label: newProps.placeholder, value: '' } }); } else if (!newProps.value) { this.setState({ - selected: { label: DEFAULT_PLACEHOLDER_STRING, value: "" } + selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' } }); } } componentDidMount() { - document.addEventListener("click", this.handleDocumentClick, false); - document.addEventListener("touchend", this.handleDocumentClick, false); - document.addEventListener("keydown", this.handleKeyPressEvent, false); + document.addEventListener('click', this.handleDocumentClick, false); + document.addEventListener('touchend', this.handleDocumentClick, false); + document.addEventListener('keydown', this.handleKeyPressEvent, false); } componentWillUnmount() { this.mounted = false; - document.removeEventListener("click", this.handleDocumentClick, false); - document.removeEventListener("touchend", this.handleDocumentClick, false); - document.removeEventListener("keydown", this.handleKeyPressEvent, false); + document.removeEventListener('click', this.handleDocumentClick, false); + document.removeEventListener('touchend', this.handleDocumentClick, false); + document.removeEventListener('keydown', this.handleKeyPressEvent, false); } handleDocumentClick(event) { @@ -67,7 +67,7 @@ class Dropdown extends Component { } handleMouseDown(event) { - if (event.type === "mousedown" && event.button !== 0) return; + if (event.type === 'mousedown' && event.button !== 0) return; event.stopPropagation(); event.preventDefault(); @@ -143,7 +143,7 @@ class Dropdown extends Component { renderOption(option) { let optionClass = classNames({ [`${this.props.baseClassName}-option`]: true, - "is-selected": + 'is-selected': option === this.state.selected.value || option === this.state.selected }); @@ -152,7 +152,7 @@ class Dropdown extends Component { return (
this.setValue(value, label)} @@ -168,7 +168,7 @@ class Dropdown extends Component { buildMenu() { let { options, baseClassName } = this.props; let ops = options.map(option => { - if (option.type === "group") { + if (option.type === 'group') { let groupTitle = (
{option.name}
); @@ -194,9 +194,9 @@ class Dropdown extends Component { render() { const { baseClassName } = this.props; - const disabledClass = this.props.disabled ? "Dropdown-disabled" : ""; + const disabledClass = this.props.disabled ? 'Dropdown-disabled' : ''; const placeHolderValue = - typeof this.state.selected === "string" + typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label; let value = ( @@ -215,13 +215,13 @@ class Dropdown extends Component { let dropdownClass = classNames({ [`${baseClassName}-root`]: true, - "is-open": this.state.isOpen + 'is-open': this.state.isOpen }); return (
{ this.dropdownButton = el; @@ -242,5 +242,5 @@ class Dropdown extends Component { } } -Dropdown.defaultProps = { baseClassName: "Dropdown" }; +Dropdown.defaultProps = { baseClassName: 'Dropdown' }; export default Dropdown; From bba99f14bcbb3ade86de802e1f6730fe08d1d404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 11:04:30 -0600 Subject: [PATCH 3/7] correct state and is-selected for user selection --- dist/index.js | 2 +- index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index c29df3c..361f113 100644 --- a/dist/index.js +++ b/dist/index.js @@ -172,7 +172,7 @@ var Dropdown = function (_Component) { value: value, label: label }, - isOpen: true + isOpen: false }; this.fireChangeEvent(newState); this.dropdownButton.focus(); diff --git a/index.js b/index.js index d6e439a..ee501d5 100644 --- a/index.js +++ b/index.js @@ -133,7 +133,7 @@ class Dropdown extends Component { value, label }, - isOpen: true + isOpen: false }; this.fireChangeEvent(newState); this.dropdownButton.focus(); From 5a01640c7f9552c8e5fbb0a9a824eb69ea04a099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 11:27:25 -0600 Subject: [PATCH 4/7] cover case where the selected state is the label not the value --- dist/index.js | 2 +- index.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index 361f113..c7b90e0 100644 --- a/dist/index.js +++ b/dist/index.js @@ -186,7 +186,7 @@ var Dropdown = function (_Component) { var _classNames, _this2 = this; - var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected.value || option === this.state.selected), _classNames)); + var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected.value || option === this.state.selected.label || option === this.state.selected), _classNames)); var value = option.value || option.label || option; var label = option.label || option.value || option; diff --git a/index.js b/index.js index ee501d5..20337dd 100644 --- a/index.js +++ b/index.js @@ -144,7 +144,9 @@ class Dropdown extends Component { let optionClass = classNames({ [`${this.props.baseClassName}-option`]: true, 'is-selected': - option === this.state.selected.value || option === this.state.selected + option === this.state.selected.value || + option === this.state.selected.label || + option === this.state.selected }); let value = option.value || option.label || option; From 47201a33698e51e74fb5058fbc2c777ec8d2b620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 11:38:13 -0600 Subject: [PATCH 5/7] fix is-selected for when an option is an object --- dist/index.js | 16 +++++++++++++++- index.js | 17 +++++++++++++---- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/dist/index.js b/dist/index.js index c7b90e0..3d8a20a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _react = require('react'); @@ -50,6 +52,7 @@ var Dropdown = function (_Component) { _this.mounted = true; _this.handleDocumentClick = _this.handleDocumentClick.bind(_this); _this.handleKeyPressEvent = _this.handleKeyPressEvent.bind(_this); + _this.isItSelected = _this.isItSelected.bind(_this); return _this; } @@ -180,13 +183,24 @@ var Dropdown = function (_Component) { return newState; }); } + }, { + key: 'isItSelected', + value: function isItSelected(option) { + var isSelected = false; + if ((typeof option === 'undefined' ? 'undefined' : _typeof(option)) === 'object') { + isSelected = option.value === this.state.selected.value; + } else { + isSelected = option === this.state.selected.value || option === this.state.selected; + } + return isSelected; + } }, { key: 'renderOption', value: function renderOption(option) { var _classNames, _this2 = this; - var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', option === this.state.selected.value || option === this.state.selected.label || option === this.state.selected), _classNames)); + var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', this.isItSelected(option)), _classNames)); var value = option.value || option.label || option; var label = option.label || option.value || option; diff --git a/index.js b/index.js index 20337dd..ba74f8e 100644 --- a/index.js +++ b/index.js @@ -19,6 +19,7 @@ class Dropdown extends Component { this.mounted = true; this.handleDocumentClick = this.handleDocumentClick.bind(this); this.handleKeyPressEvent = this.handleKeyPressEvent.bind(this); + this.isItSelected = this.isItSelected.bind(this); } componentWillReceiveProps(newProps) { @@ -140,13 +141,21 @@ class Dropdown extends Component { this.setState(() => newState); } + isItSelected(option) { + let isSelected = false; + if (typeof option === 'object') { + isSelected = option.value === this.state.selected.value; + } else { + isSelected = + option === this.state.selected.value || option === this.state.selected; + } + return isSelected; + } + renderOption(option) { let optionClass = classNames({ [`${this.props.baseClassName}-option`]: true, - 'is-selected': - option === this.state.selected.value || - option === this.state.selected.label || - option === this.state.selected + 'is-selected': this.isItSelected(option) }); let value = option.value || option.label || option; From 080f40c3a0e04d254e3067a833bd0a5b4ad1f101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Fri, 17 Aug 2018 13:36:59 -0600 Subject: [PATCH 6/7] fix combo of state - options string - object selection --- dist/index.js | 2 +- index.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index 3d8a20a..f5a22b7 100644 --- a/dist/index.js +++ b/dist/index.js @@ -188,7 +188,7 @@ var Dropdown = function (_Component) { value: function isItSelected(option) { var isSelected = false; if ((typeof option === 'undefined' ? 'undefined' : _typeof(option)) === 'object') { - isSelected = option.value === this.state.selected.value; + isSelected = option.value === this.state.selected.value || option.label === this.state.selected; } else { isSelected = option === this.state.selected.value || option === this.state.selected; } diff --git a/index.js b/index.js index ba74f8e..1050cbe 100644 --- a/index.js +++ b/index.js @@ -144,7 +144,9 @@ class Dropdown extends Component { isItSelected(option) { let isSelected = false; if (typeof option === 'object') { - isSelected = option.value === this.state.selected.value; + isSelected = + option.value === this.state.selected.value || + option.label === this.state.selected; } else { isSelected = option === this.state.selected.value || option === this.state.selected; From 268829b3c9ea089efb3352f56643ec7a618d5416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Csongor=20Sze=CC=81les?= Date: Mon, 20 Aug 2018 10:49:46 -0600 Subject: [PATCH 7/7] bugfix: fix IE11 race condition for closing the menu on first user click --- dist/index.js | 75 ++++++++++++++++++++++++++++++--------------------- index.js | 27 ++++++++++--------- 2 files changed, 59 insertions(+), 43 deletions(-) diff --git a/dist/index.js b/dist/index.js index f5a22b7..b4d4fe5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -89,7 +89,9 @@ var Dropdown = function (_Component) { value: function handleDocumentClick(event) { if (this.mounted) { if (!_reactDom2.default.findDOMNode(this).contains(event.target)) { - this.setState({ isOpen: false }); + this.setState(function () { + return { isOpen: false }; + }); } } } @@ -97,7 +99,9 @@ var Dropdown = function (_Component) { key: 'handleKeyPressEvent', value: function handleKeyPressEvent(e) { if (e.keyCode === 27) { - this.setState({ isOpen: false }); + this.setState(function () { + return { isOpen: false }; + }); } } }, { @@ -110,20 +114,24 @@ var Dropdown = function (_Component) { }, { key: 'handleMouseDown', value: function handleMouseDown(event) { + var _this2 = this; + if (event.type === 'mousedown' && event.button !== 0) return; event.stopPropagation(); event.preventDefault(); if (!this.props.disabled) { - this.setState({ - isOpen: !this.state.isOpen + this.setState(function () { + return { isOpen: !_this2.state.isOpen }; }); } } }, { key: 'handleDropdownFocus', value: function handleDropdownFocus() { - this.setState({ isOpen: true }); + this.setState(function () { + return { isOpen: true }; + }); } }, { key: 'handleDropdownBlur', @@ -139,7 +147,9 @@ var Dropdown = function (_Component) { } } } - this.setState({ isOpen: stayOpen }); + this.setState(function () { + return { isOpen: stayOpen }; + }); } }, { key: 'handleDropdownKeyDown', @@ -170,18 +180,23 @@ var Dropdown = function (_Component) { }, { key: 'setValue', value: function setValue(value, label) { + var _this3 = this; + var newState = { + isOpen: false, selected: { value: value, label: label - }, - isOpen: false + } }; this.fireChangeEvent(newState); this.dropdownButton.focus(); - this.setState(function () { - return newState; - }); + // there seems to be a race condition in IE11 for closing the menu in render, so setTimeout :( + setTimeout(function () { + _this3.setState(function () { + return newState; + }); + }, 20); } }, { key: 'isItSelected', @@ -198,7 +213,7 @@ var Dropdown = function (_Component) { key: 'renderOption', value: function renderOption(option) { var _classNames, - _this2 = this; + _this4 = this; var optionClass = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this.props.baseClassName + '-option', true), _defineProperty(_classNames, 'is-selected', this.isItSelected(option)), _classNames)); @@ -212,16 +227,16 @@ var Dropdown = function (_Component) { key: value, className: optionClass, onMouseDown: function onMouseDown() { - return _this2.setValue(value, label); + return _this4.setValue(value, label); }, onClick: function onClick() { - return _this2.setValue(value, label); + return _this4.setValue(value, label); }, onKeyDown: function onKeyDown(e) { - return _this2.handleOptionKeyDown(e, value, label); + return _this4.handleOptionKeyDown(e, value, label); }, onBlur: function onBlur(e) { - return _this2.handleDropdownBlur(e); + return _this4.handleDropdownBlur(e); } }, label @@ -230,7 +245,7 @@ var Dropdown = function (_Component) { }, { key: 'buildMenu', value: function buildMenu() { - var _this3 = this; + var _this5 = this; var _props = this.props, options = _props.options, @@ -244,7 +259,7 @@ var Dropdown = function (_Component) { option.name ); var _options = option.items.map(function (item) { - return _this3.renderOption(item); + return _this5.renderOption(item); }); return _react2.default.createElement( @@ -254,7 +269,7 @@ var Dropdown = function (_Component) { _options ); } else { - return _this3.renderOption(option); + return _this5.renderOption(option); } }); @@ -267,7 +282,7 @@ var Dropdown = function (_Component) { }, { key: 'render', value: function render() { - var _this4 = this, + var _this6 = this, _classNames2; var baseClassName = this.props.baseClassName; @@ -279,16 +294,16 @@ var Dropdown = function (_Component) { { className: baseClassName + '-placeholder' }, placeHolderValue ); - var menu = this.state.isOpen ? _react2.default.createElement( + var menu = _react2.default.createElement( 'div', { ref: function ref(el) { - _this4.dropdownMenu = el; + _this6.dropdownMenu = el; }, className: baseClassName + '-menu' }, this.buildMenu() - ) : null; + ); var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + '-root', true), _defineProperty(_classNames2, 'is-open', this.state.isOpen), _classNames2)); @@ -301,29 +316,29 @@ var Dropdown = function (_Component) { tabIndex: this.props.tabIndex || '0', role: 'menu', ref: function ref(el) { - _this4.dropdownButton = el; + _this6.dropdownButton = el; }, onFocus: function onFocus() { - return _this4.handleDropdownFocus(); + return _this6.handleDropdownFocus(); }, onBlur: function onBlur(e) { - return _this4.handleDropdownBlur(e); + return _this6.handleDropdownBlur(e); }, className: baseClassName + '-control ' + disabledClass, onMouseDown: function onMouseDown(e) { - return _this4.handleMouseDown(e); + return _this6.handleMouseDown(e); }, onTouchEnd: function onTouchEnd(e) { - return _this4.handleMouseDown(e); + return _this6.handleMouseDown(e); }, onKeyDown: function onKeyDown(e) { - return _this4.handleDropdownKeyDown(e); + return _this6.handleDropdownKeyDown(e); } }, value, _react2.default.createElement('span', { className: baseClassName + '-arrow' }) ), - menu + this.state.isOpen && menu ); } }]); diff --git a/index.js b/index.js index 1050cbe..ead0089 100644 --- a/index.js +++ b/index.js @@ -50,14 +50,14 @@ class Dropdown extends Component { handleDocumentClick(event) { if (this.mounted) { if (!ReactDOM.findDOMNode(this).contains(event.target)) { - this.setState({ isOpen: false }); + this.setState(() => ({ isOpen: false })); } } } handleKeyPressEvent(e) { if (e.keyCode === 27) { - this.setState({ isOpen: false }); + this.setState(() => ({ isOpen: false })); } } @@ -73,14 +73,12 @@ class Dropdown extends Component { event.preventDefault(); if (!this.props.disabled) { - this.setState({ - isOpen: !this.state.isOpen - }); + this.setState(() => ({ isOpen: !this.state.isOpen })); } } handleDropdownFocus() { - this.setState({ isOpen: true }); + this.setState(() => ({ isOpen: true })); } handleDropdownBlur(e) { @@ -97,7 +95,7 @@ class Dropdown extends Component { } } } - this.setState({ isOpen: stayOpen }); + this.setState(() => ({ isOpen: stayOpen })); } handleDropdownKeyDown(e) { @@ -130,15 +128,18 @@ class Dropdown extends Component { setValue(value, label) { let newState = { + isOpen: false, selected: { value, label - }, - isOpen: false + } }; this.fireChangeEvent(newState); this.dropdownButton.focus(); - this.setState(() => newState); + // there seems to be a race condition in IE11 for closing the menu in render, so setTimeout :( + setTimeout(() => { + this.setState(() => newState); + }, 20); } isItSelected(option) { @@ -215,7 +216,7 @@ class Dropdown extends Component { let value = (
{placeHolderValue}
); - let menu = this.state.isOpen ? ( + let menu = (
{ this.dropdownMenu = el; @@ -224,7 +225,7 @@ class Dropdown extends Component { > {this.buildMenu()}
- ) : null; + ); let dropdownClass = classNames({ [`${baseClassName}-root`]: true, @@ -249,7 +250,7 @@ class Dropdown extends Component { {value}
- {menu} + {this.state.isOpen && menu}
); }