diff --git a/src/Options.tsx b/src/Options.tsx index aa570dc0..7612c0c5 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -1,6 +1,7 @@ import { KeyCode } from '@rc-component/util'; import React from 'react'; import type { PaginationLocale } from './interface'; +import isEnterOrSpaceKey from './isEnterOrSpaceKey'; export type SizeChangerRender = (info: { disabled: boolean; @@ -21,7 +22,7 @@ interface OptionsProps { selectPrefixCls?: string; pageSize: number; pageSizeOptions?: number[]; - goButton?: boolean | string; + goButton?: boolean | React.ReactNode; changeSize?: (size: number) => void; quickGo?: (value: number) => void; buildOptionText?: (value: number | string) => string; @@ -149,6 +150,21 @@ const Options: React.FC = (props) => { > {locale.jump_to_confirm} + ) : typeof goButton === 'string' ? ( + { + if (isEnterOrSpaceKey(event)) { + event.preventDefault(); + go({ type: 'click' }); + } + }} + > + {goButton} + ) : ( {goButton} diff --git a/src/Pagination.tsx b/src/Pagination.tsx index ac1c4b26..0b59b391 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -255,7 +255,7 @@ const Pagination: React.FC = (props) => { } function runIfEnterOrSpace( - event: React.KeyboardEvent, + event: React.KeyboardEvent, callback: (...args: any[]) => void, ...restParams: any[] ) { @@ -378,6 +378,24 @@ const Pagination: React.FC = (props) => { {locale.jump_to_confirm} ); + } else if (typeof goButton === 'string') { + gotoButton = ( + + runIfEnterOrSpace(event, () => { + if (String(internalInputVal) !== '') { + handleChange(internalInputVal); + } + }) + } + > + {goButton} + + ); } else { gotoButton = ( diff --git a/tests/jumper.test.tsx b/tests/jumper.test.tsx index f87dbcb7..4417f087 100644 --- a/tests/jumper.test.tsx +++ b/tests/jumper.test.tsx @@ -213,6 +213,71 @@ describe('simple quick jumper', () => { ).toBeTruthy(); }); + it('supports keyboard activation for a text goButton', () => { + wrapper = render( + , + ); + + const input = wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper input', + ); + const goButton = wrapper.getByRole('button', { name: 'Go' }); + + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.keyDown(goButton, { key: ' ', keyCode: 32, which: 32 }); + + expect(onChange).toHaveBeenLastCalledWith(2, 10); + }); + + it('supports keyboard activation for a text goButton in simple mode', () => { + wrapper = render( + , + ); + + const input = wrapper.container.querySelector( + '.rc-pagination-simple-pager input', + ); + const goButton = wrapper.getByRole('button', { name: 'Go' }); + + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.keyDown(goButton, { key: 'Enter', keyCode: 13, which: 13 }); + + expect(onChange).toHaveBeenLastCalledWith(2, 10); + }); + + it('does not activate a text goButton with empty simple input', () => { + wrapper = render( + , + ); + + const input = wrapper.container.querySelector( + '.rc-pagination-simple-pager input', + ); + const goButton = wrapper.getByRole('button', { name: 'Go' }); + + fireEvent.change(input, { target: { value: '' } }); + fireEvent.keyDown(goButton, { key: ' ', keyCode: 32, which: 32 }); + + expect(onChange).not.toHaveBeenCalled(); + }); + it('goButton defaultly hidden', () => { wrapper = render(