Prevent browser back navigation when ClearButton is focused (#580)

Author: ericgio

src/__tests__/components/ClearButton.test.js

@@ -3,6 +3,8 @@ import React from 'react';
 
 import ClearButton from '../../components/ClearButton';
 
+import { BACKSPACE, RETURN } from '../../constants';
+
 describe('<ClearButton>', () => {
   let button, onClick;
 
@@ -22,7 +24,32 @@ describe('<ClearButton>', () => {
   });
 
   test('registers a click', () => {
-    button.simulate('click', { stopPropagation: () => {} });
+    const e = { stopPropagation: jest.fn() };
+    button.simulate('click', e);
     expect(onClick).toHaveBeenCalledTimes(1);
+    expect(e.stopPropagation).toHaveBeenCalledTimes(1);
+  });
+
+  test('prevents the default backspace behavior', () => {
+    const onKeyDown = jest.fn();
+    button.setProps({ onKeyDown });
+
+    const backspace = {
+      keyCode: BACKSPACE,
+      preventDefault: jest.fn(),
+    };
+    button.simulate('keydown', backspace);
+
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(backspace.preventDefault).toHaveBeenCalledTimes(1);
+
+    const enter = {
+      keyCode: RETURN,
+      preventDefault: jest.fn(),
+    };
+    button.simulate('keydown', enter);
+
+    expect(onKeyDown).toHaveBeenCalledTimes(2);
+    expect(enter.preventDefault).toHaveBeenCalledTimes(0);
   });
 });

src/components/ClearButton.js

@@ -7,23 +7,28 @@ import PropTypes from 'prop-types';
 import { isSizeLarge, noop } from '../utils';
 
 import { sizeType } from '../propTypes';
-import type { EventHandler, Size } from '../types';
+import type { EventHandler, KeyboardEventHandler, Size } from '../types';
+
+import { BACKSPACE } from '../constants';
 
 const propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   size: sizeType,
 };
 
 const defaultProps = {
   label: 'Clear',
   onClick: noop,
+  onKeyDown: noop,
 };
 
 type Props = {
   className?: string,
   label: string,
   onClick: EventHandler<HTMLButtonElement>,
+  onKeyDown: KeyboardEventHandler<HTMLButtonElement>,
   size?: Size,
 };
 
@@ -36,19 +41,32 @@ const ClearButton = ({
   className,
   label,
   onClick,
+  onKeyDown,
   size,
   ...props
 }: Props) => (
   <button
     {...props}
     aria-label={label}
-    className={cx('close', 'rbt-close', {
-      'rbt-close-lg': isSizeLarge(size),
-    }, className)}
+    className={cx(
+      'close',
+      'rbt-close',
+      {
+        'rbt-close-lg': isSizeLarge(size),
+      },
+      className
+    )}
     onClick={(e: SyntheticEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       onClick(e);
     }}
+    onKeyDown={(e: SyntheticKeyboardEvent<HTMLButtonElement>) => {
+      // Prevent browser from navigating back.
+      if (e.keyCode === BACKSPACE) {
+        e.preventDefault();
+      }
+      onKeyDown(e);
+    }}
     type="button">
     <span aria-hidden="true">&times;</span>
     <span className="sr-only">{label}</span>