auto focus calendar input when opening

react-component · Nov 14, 2018 · 01e24fd · 01e24fd
1 parent c92cf57
commit 01e24fd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -192,6 +192,10 @@ const Calendar = createReactClass({
     );
   },
 
+  saveDateInput(dateInput) {
+    this.saveFocusElement(dateInput ? dateInput.dateInputInstance : undefined);
+  },
+
   render() {
     const { props, state } = this;
     const {
@@ -240,6 +244,7 @@ const Calendar = createReactClass({
         selectedValue={selectedValue}
         onChange={this.onDateInputChange}
         clearIcon={clearIcon}
+        ref={this.saveDateInput}
       />
     ) : null;
     const children = [

diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js
@@ -53,11 +53,17 @@ export default {
   },
 
   focus() {
-    if (this.rootInstance) {
+    if (this.focusElement) {
+      this.focusElement.focus();
+    } else if (this.rootInstance) {
       this.rootInstance.focus();
     }
   },
 
+  saveFocusElement(focusElement) {
+    this.focusElement = focusElement;
+  },
+
   saveRoot(root) {
     this.rootInstance = root;
   },

diff --git a/tests/Picker.spec.jsx b/tests/Picker.spec.jsx
@@ -184,4 +184,13 @@ describe('DatePicker', () => {
     picker.find('.rc-calendar-clear-btn').simulate('click');
     expect(picker.state().open).toBe(false);
   });
+
+  it('auto focuses the calendar input when opening', () => {
+    jest.useFakeTimers();
+    const picker = renderPicker({ value: moment() });
+    picker.find('.rc-calendar-picker-input').simulate('click');
+    jest.runAllTimers();
+    expect(document.activeElement).toBeDefined();
+    expect(document.activeElement.classList).toContain('rc-calendar-input');
+  });
 });