ant-design/components/input-number/demo/focus.tsx
Jony J 6380fc7a95
feat: improve focus behavior (#51444)
* feat: improve focus behavior

* test: update snapshot

* chore(deps): bump rc-input-number version

* chore: remove useless code

* test: update snapshot
2024-11-01 17:21:02 +08:00

54 lines
1.2 KiB
TypeScript

import React, { useRef } from 'react';
import { Button, InputNumber, Space } from 'antd';
import type { InputNumberRef } from 'rc-input-number';
const App: React.FC = () => {
const inputRef = useRef<InputNumberRef>(null);
return (
<Space direction="vertical" style={{ width: '100%' }}>
<Space wrap>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'start',
});
}}
>
Focus at first
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'end',
});
}}
>
Focus at last
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
cursor: 'all',
});
}}
>
Focus to select all
</Button>
<Button
onClick={() => {
inputRef.current!.focus({
preventScroll: true,
});
}}
>
Focus prevent scroll
</Button>
</Space>
<InputNumber style={{ width: '100%' }} defaultValue={999} ref={inputRef} />
</Space>
);
};
export default App;