diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index 7c57c94e69276f..9755a7b8afeb4d 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -277,6 +277,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
label,
onClick,
onDelete,
+ onKeyDown,
onKeyUp,
size = 'medium',
variant = 'default',
@@ -294,6 +295,21 @@ const Chip = React.forwardRef(function Chip(props, ref) {
}
};
+ const isDeleteKeyboardEvent = keyboardEvent =>
+ keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+
+ const handleKeyDown = event => {
+ if (isDeleteKeyboardEvent(event)) {
+ // will be handled in keyUp, otherwise some browsers
+ // might init navigation
+ event.preventDefault();
+ }
+
+ if (onKeyDown) {
+ onKeyDown(event);
+ }
+ };
+
const handleKeyUp = event => {
if (onKeyUp) {
onKeyUp(event);
@@ -304,10 +320,9 @@ const Chip = React.forwardRef(function Chip(props, ref) {
return;
}
- const key = event.key;
- if (onDelete && (key === 'Backspace' || key === 'Delete')) {
+ if (onDelete && isDeleteKeyboardEvent(event)) {
onDelete(event);
- } else if (key === 'Escape' && chipRef.current) {
+ } else if (event.key === 'Escape' && chipRef.current) {
chipRef.current.blur();
}
};
@@ -393,6 +408,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
aria-disabled={disabled ? true : undefined}
tabIndex={clickable || onDelete ? 0 : undefined}
onClick={onClick}
+ onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
ref={handleRef}
{...moreProps}
diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index 8b5a83781a3b7f..976dadd66091b4 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/packages/material-ui/src/Chip/Chip.test.js
@@ -362,10 +362,21 @@ describe('', () => {
['Backspace', 'Delete'].forEach(key => {
it(`should call onDelete '${key}' is released`, () => {
const handleDelete = spy();
- const { getAllByRole } = render( {}} onDelete={handleDelete} />);
+ const handleKeyDown = spy(event => {
+ return event.defaultPrevented;
+ });
+ const { getAllByRole } = render(
+ {}} onKeyDown={handleKeyDown} onDelete={handleDelete} />,
+ );
const chip = getAllByRole('button')[0];
chip.focus();
+ fireEvent.keyDown(document.activeElement, { key });
+
+ // defaultPrevented?
+ expect(handleKeyDown.returnValues[0]).to.equal(true);
+ expect(handleDelete.callCount).to.equal(0);
+
fireEvent.keyUp(document.activeElement, { key });
expect(handleDelete.callCount).to.equal(1);