diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 2bdfceed53..04662ed919 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -46,6 +46,8 @@ export default class RangePicker extends React.Component { showToday: false, }; + private picker: HTMLSpanElement; + constructor(props: any) { super(props); const value = props.value || props.defaultValue || []; @@ -128,6 +130,18 @@ export default class RangePicker extends React.Component { } } + focus() { + this.picker.focus(); + } + + blur() { + this.picker.blur(); + } + + savePicker = (node: HTMLSpanElement) => { + this.picker = node; + } + renderFooter = (...args: any[]) => { const { prefixCls, ranges, renderExtraFooter } = this.props; if (!ranges && !renderExtraFooter) { @@ -254,6 +268,7 @@ export default class RangePicker extends React.Component { value={(start && start.format(props.format)) || ''} placeholder={startPlaceholder} className={`${prefixCls}-range-picker-input`} + tabIndex={-1} /> ~ { value={(end && end.format(props.format)) || ''} placeholder={endPlaceholder} className={`${prefixCls}-range-picker-input`} + tabIndex={-1} /> {clearIcon} @@ -271,11 +287,12 @@ export default class RangePicker extends React.Component { return ( { format: 'YYYY-Wo', allowClear: true, }; + + private input: any; + constructor(props: any) { super(props); const value = props.value || props.defaultValue; @@ -63,6 +66,19 @@ export default class WeekPicker extends React.Component { e.stopPropagation(); this.handleChange(null); } + + focus() { + this.input.focus(); + } + + blur() { + this.input.blur(); + } + + saveInput = (node: any) => { + this.input = node; + } + render() { const { prefixCls, className, disabled, pickerClass, popupStyle, @@ -100,11 +116,14 @@ export default class WeekPicker extends React.Component { return ( {clearIcon} diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js new file mode 100644 index 0000000000..77bb58803c --- /dev/null +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -0,0 +1,6 @@ +import DatePicker from '..'; +import focusTest from '../../../tests/shared/focusTest'; + +describe('DatePicker', () => { + focusTest(DatePicker); +}); diff --git a/components/date-picker/__tests__/MonthPicker.test.js b/components/date-picker/__tests__/MonthPicker.test.js new file mode 100644 index 0000000000..7742291bbb --- /dev/null +++ b/components/date-picker/__tests__/MonthPicker.test.js @@ -0,0 +1,6 @@ +import { MonthPicker } from '..'; +import focusTest from '../../../tests/shared/focusTest'; + +describe('MonthPicker', () => { + focusTest(MonthPicker); +}); diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index 9084a201af..76aeb006ec 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -2,8 +2,11 @@ import React from 'react'; import { mount, render } from 'enzyme'; import moment from 'moment'; import { RangePicker } from '../'; +import focusTest from '../../../tests/shared/focusTest'; describe('RangePicker', () => { + focusTest(RangePicker); + it('show month panel according to value', () => { const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn'); const wrapper = mount( diff --git a/components/date-picker/__tests__/WeekPicker.test.js b/components/date-picker/__tests__/WeekPicker.test.js new file mode 100644 index 0000000000..5ee40b37cb --- /dev/null +++ b/components/date-picker/__tests__/WeekPicker.test.js @@ -0,0 +1,6 @@ +import { WeekPicker } from '..'; +import focusTest from '../../../tests/shared/focusTest'; + +describe('WeekPicker', () => { + focusTest(WeekPicker); +}); diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap index 878e1fd590..c2e1d7dc08 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap @@ -36,6 +36,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
{ + this.input = node; + } + render() { const { value } = this.state; const props = omit(this.props, ['onChange']); @@ -130,6 +144,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any { const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
+ , defaultFor inputPrefixCls: 'ant-input', }; + private picker: any; + + componentDidMount() { + const { autoFocus, disabled } = this.props; + if (autoFocus && !disabled) { + this.focus(); + } + } + handleOpenChange = (open: boolean) => { const { onOpenChange } = this.props; onOpenChange(open); } + handleFocus = (e: React.FocusEventHandler) => { + const { onFocus } = this.props; + if (onFocus) { + onFocus(e); + } + } + + handleBlur = (e: React.FocusEventHandler) => { + const { onBlur } = this.props; + if (onBlur) { + onBlur(e); + } + } + + focus() { + this.picker.focus(); + } + + blur() { + this.picker.blur(); + } + + savePicker = (node: any) => { + this.picker = node; + } + getDefaultLocale() { const locale = require('./locale/en_US'); return locale.default || locale; @@ -84,12 +119,15 @@ export default function wrapPicker(Picker: React.ComponentClass, defaultFor return ( ); } diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index ea6ec17af9..5db99b0e9d 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -1834,6 +1834,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] = >