Only focus first item of dropdown if it was opened via keyboard

This commit is contained in:
Thibaut Girka 2018-09-11 22:35:17 +02:00 committed by ThibG
parent cf142e8556
commit 5ff733b614
4 changed files with 19 additions and 11 deletions

View File

@ -1,8 +1,8 @@
export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN'; export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE'; export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
export function openDropdownMenu(id, placement) { export function openDropdownMenu(id, placement, keyboard) {
return { type: DROPDOWN_MENU_OPEN, id, placement }; return { type: DROPDOWN_MENU_OPEN, id, placement, keyboard };
} }
export function closeDropdownMenu(id) { export function closeDropdownMenu(id) {

View File

@ -23,6 +23,7 @@ class DropdownMenu extends React.PureComponent {
placement: PropTypes.string, placement: PropTypes.string,
arrowOffsetLeft: PropTypes.string, arrowOffsetLeft: PropTypes.string,
arrowOffsetTop: PropTypes.string, arrowOffsetTop: PropTypes.string,
openedViaKeyboard: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
@ -43,7 +44,7 @@ class DropdownMenu extends React.PureComponent {
componentDidMount () { componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false); document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
if (this.focusedItem) this.focusedItem.focus(); if (this.focusedItem && this.props.openedviaKeyBoard) this.focusedItem.focus();
this.setState({ mounted: true }); this.setState({ mounted: true });
} }
@ -170,6 +171,7 @@ export default class Dropdown extends React.PureComponent {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
dropdownPlacement: PropTypes.string, dropdownPlacement: PropTypes.string,
openDropdownId: PropTypes.number, openDropdownId: PropTypes.number,
openedViaKeyboard: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
@ -180,14 +182,14 @@ export default class Dropdown extends React.PureComponent {
id: id++, id: id++,
}; };
handleClick = ({ target }) => { handleClick = ({ target, type }) => {
if (this.state.id === this.props.openDropdownId) { if (this.state.id === this.props.openDropdownId) {
this.handleClose(); this.handleClose();
} else { } else {
const { top } = target.getBoundingClientRect(); const { top } = target.getBoundingClientRect();
const placement = top * 2 < innerHeight ? 'bottom' : 'top'; const placement = top * 2 < innerHeight ? 'bottom' : 'top';
this.props.onOpen(this.state.id, this.handleItemClick, placement); this.props.onOpen(this.state.id, this.handleItemClick, placement, type !== 'click');
} }
} }
@ -197,6 +199,11 @@ export default class Dropdown extends React.PureComponent {
handleKeyDown = e => { handleKeyDown = e => {
switch(e.key) { switch(e.key) {
case ' ':
case 'Enter':
this.handleClick(e);
e.preventDefault();
break;
case 'Escape': case 'Escape':
this.handleClose(); this.handleClose();
break; break;
@ -232,7 +239,7 @@ export default class Dropdown extends React.PureComponent {
} }
render () { render () {
const { icon, items, size, ariaLabel, disabled, dropdownPlacement, openDropdownId } = this.props; const { icon, items, size, ariaLabel, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
const open = this.state.id === openDropdownId; const open = this.state.id === openDropdownId;
return ( return (
@ -248,7 +255,7 @@ export default class Dropdown extends React.PureComponent {
/> />
<Overlay show={open} placement={dropdownPlacement} target={this.findTarget}> <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
<DropdownMenu items={items} onClose={this.handleClose} /> <DropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
</Overlay> </Overlay>
</div> </div>
); );

View File

@ -8,10 +8,11 @@ const mapStateToProps = state => ({
isModalOpen: state.get('modal').modalType === 'ACTIONS', isModalOpen: state.get('modal').modalType === 'ACTIONS',
dropdownPlacement: state.getIn(['dropdown_menu', 'placement']), dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
openDropdownId: state.getIn(['dropdown_menu', 'openId']), openDropdownId: state.getIn(['dropdown_menu', 'openId']),
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
}); });
const mapDispatchToProps = (dispatch, { status, items }) => ({ const mapDispatchToProps = (dispatch, { status, items }) => ({
onOpen(id, onItemClick, dropdownPlacement) { onOpen(id, onItemClick, dropdownPlacement, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', { dispatch(isUserTouching() ? openModal('ACTIONS', {
status, status,
actions: items.map( actions: items.map(
@ -21,7 +22,7 @@ const mapDispatchToProps = (dispatch, { status, items }) => ({
onClick: item.action ? ((e) => { return onItemClick(i, e) }) : null, onClick: item.action ? ((e) => { return onItemClick(i, e) }) : null,
} : null } : null
), ),
}) : openDropdownMenu(id, dropdownPlacement)); }) : openDropdownMenu(id, dropdownPlacement, keyboard));
}, },
onClose(id) { onClose(id) {
dispatch(closeModal()); dispatch(closeModal());

View File

@ -4,12 +4,12 @@ import {
DROPDOWN_MENU_CLOSE, DROPDOWN_MENU_CLOSE,
} from '../actions/dropdown_menu'; } from '../actions/dropdown_menu';
const initialState = Immutable.Map({ openId: null, placement: null }); const initialState = Immutable.Map({ openId: null, placement: null, keyboard: false });
export default function dropdownMenu(state = initialState, action) { export default function dropdownMenu(state = initialState, action) {
switch (action.type) { switch (action.type) {
case DROPDOWN_MENU_OPEN: case DROPDOWN_MENU_OPEN:
return state.merge({ openId: action.id, placement: action.placement }); return state.merge({ openId: action.id, placement: action.placement, keyboard: action.keyboard });
case DROPDOWN_MENU_CLOSE: case DROPDOWN_MENU_CLOSE:
return state.get('openId') === action.id ? state.set('openId', null) : state; return state.get('openId') === action.id ? state.set('openId', null) : state;
default: default: