diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js index 20078e2a7..aa5e73415 100644 --- a/client/coral-ui/components/Dropdown.js +++ b/client/coral-ui/components/Dropdown.js @@ -14,6 +14,20 @@ class Dropdown extends React.Component { isOpen: false }; } + + handleOptionKeyDown = (value, e) => { + const code = e.which; + + // 13 = Return, 32 = Space + if ((code === 13) || (code === 32)) { + e.preventDefault(); + this.setValue(value); + } + } + + handleOptionClick = (value) => { + this.setValue(value); + } setValue = (value) => { if (this.props.onChange) { @@ -73,7 +87,8 @@ class Dropdown extends React.Component { .map((child) => React.cloneElement(child, { key: child.props.value, - onClick: () => this.setValue(child.props.value, child.props.label) + onClick: () => this.handleOptionClick(child.props.value), + onKeyDown: (e) => this.handleOptionKeyDown(child.props.value, e) }))} diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js index e52c96e8a..b7132e6b2 100644 --- a/client/coral-ui/components/Option.js +++ b/client/coral-ui/components/Option.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import styles from './Option.css'; import cn from 'classnames'; -const Option = ({className, label = '', onClick}) => ( -