diff --git a/src/Step.tsx b/src/Step.tsx index 1eb9122..098db38 100644 --- a/src/Step.tsx +++ b/src/Step.tsx @@ -1,7 +1,6 @@ /* eslint react/prop-types: 0 */ import * as React from 'react'; import { clsx } from 'clsx'; -import { KeyCode } from '@rc-component/util'; import type { Status, StepItem, StepsProps } from './Steps'; import Rail from './Rail'; import { UnstableContext } from './UnstableContext'; @@ -113,9 +112,9 @@ export default function Step(props: StepProps) { }; accessibilityProps.onKeyDown = (e) => { - const { which } = e; - if (which === KeyCode.ENTER || which === KeyCode.SPACE) { - onClick(index); + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + e.currentTarget.click(); } }; } diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 12b4f55..f31d169 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { createEvent, render, fireEvent } from '@testing-library/react'; import Steps from '../src'; describe('Steps', () => { @@ -283,6 +283,7 @@ describe('Steps', () => { it('key board support', () => { const onChange = jest.fn(); + const onItemClick = jest.fn(); const { container } = render( { { title: 'Waiting', description: 'This is a description', + onClick: onItemClick, }, ]} />, ); const button = container.querySelectorAll('[role="button"]')[1]; - fireEvent.keyDown(button, { key: 'Enter', keyCode: 13, which: 13 }); - - expect(onChange).toHaveBeenCalledWith(1); + const enterEvent = createEvent.keyDown(button, { key: 'Enter' }); + const spaceEvent = createEvent.keyDown(button, { key: ' ' }); + fireEvent(button, enterEvent); + fireEvent(button, spaceEvent); + + expect(onChange).toHaveBeenNthCalledWith(1, 1); + expect(onChange).toHaveBeenNthCalledWith(2, 1); + expect(onItemClick).toHaveBeenCalledTimes(2); + expect(enterEvent.defaultPrevented).toBe(true); + expect(spaceEvent.defaultPrevented).toBe(true); }); it('itemRender', () => {