Skip to content
This repository has been archived by the owner on Oct 19, 2021. It is now read-only.

Commit

Permalink
feat(Toggle and ToggleSmall): on Enter key press toggle action is bei…
Browse files Browse the repository at this point in the history
…ng triggered. (#2219)

* fix(Toggle): adds event for key.wich===13

* fix(ToggleSmall): adds event for key.wich===13

* fix(Toggle): adds helpers for keypress

* fix: adds helpers for keypress

* fix: adds actions
  • Loading branch information
paschalidi authored and emyarod committed Apr 18, 2019
1 parent 2753040 commit 938a0fe
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/components/Toggle/Toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React from 'react';
import classNames from 'classnames';
import { settings } from 'carbon-components';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { keys, match } from '../../tools/key';

const { prefix } = settings;
const getInstanceId = setupGetInstanceId();
Expand Down Expand Up @@ -113,6 +114,13 @@ class Toggle extends React.Component {
ref={el => {
input = el;
}}
onKeyUp={evt => {
if (match(evt, keys.ENTER)) {
input.checked = !input.checked;
onChange(evt);
onToggle(input.checked, id, evt);
}
}}
/>

<label className={`${prefix}--toggle__label`} htmlFor={id}>
Expand Down
8 changes: 8 additions & 0 deletions src/components/ToggleSmall/ToggleSmall.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { settings } from 'carbon-components';
import { keys, match } from '../../tools/key';

const { prefix } = settings;

Expand Down Expand Up @@ -52,6 +53,13 @@ const ToggleSmall = ({
input = el;
}}
aria-label={ariaLabel}
onKeyUp={evt => {
if (match(evt, keys.ENTER)) {
input.checked = !input.checked;
onChange(evt);
onToggle(input.checked, id, evt);
}
}}
/>

<label className={`${prefix}--toggle__label`} htmlFor={id}>
Expand Down

0 comments on commit 938a0fe

Please sign in to comment.