Move focus to datepicker on readOnly input focus for DateRangePicker…

…/SingleDatePicker
react-dates · Apr 12, 2018 · 5169d47 · 5169d47
1 parent 7218f44
commit 5169d47
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 5 deletions.
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -204,14 +204,18 @@ class DateRangePicker extends React.Component {
   onDateRangePickerInputFocus(focusedInput) {
     const {
       onFocusChange,
+      readOnly,
       withPortal,
       withFullScreenPortal,
       keepFocusOnInput,
     } = this.props;
 
     if (focusedInput) {
       const withAnyPortal = withPortal || withFullScreenPortal;
-      const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+      const moveFocusToDayPicker =
+        withAnyPortal ||
+        (readOnly && !keepFocusOnInput) ||
+        (this.isTouchDevice && !keepFocusOnInput);
 
       if (moveFocusToDayPicker) {
         this.onDayPickerFocus();

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -204,13 +204,17 @@ class SingleDatePicker extends React.Component {
     const {
       disabled,
       onFocusChange,
+      readOnly,
       withPortal,
       withFullScreenPortal,
       keepFocusOnInput,
     } = this.props;
 
     const withAnyPortal = withPortal || withFullScreenPortal;
-    const moveFocusToDayPicker = withAnyPortal || (this.isTouchDevice && !keepFocusOnInput);
+    const moveFocusToDayPicker =
+      withAnyPortal ||
+      (readOnly && !keepFocusOnInput) ||
+      (this.isTouchDevice && !keepFocusOnInput);
 
     if (moveFocusToDayPicker) {
       this.onDayPickerFocus();

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
@@ -361,6 +361,19 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
+      it('calls onDayPickerFocus if focusedInput and readOnly', () => {
+        const wrapper = shallow((
+          <DateRangePicker
+            {...requiredProps}
+            onDatesChange={sinon.stub()}
+            onFocusChange={sinon.stub()}
+            readOnly
+          />
+        )).dive();
+        wrapper.instance().onDateRangePickerInputFocus(START_DATE);
+        expect(onDayPickerFocusSpy.callCount).to.equal(1);
+      });
+
       it('calls onDayPickerFocus if focusedInput and isTouchDevice', () => {
         const wrapper = shallow((
           <DateRangePicker
@@ -374,7 +387,7 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
-      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
+      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal/!readOnly and keepFocusOnInput', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}
@@ -402,7 +415,7 @@ describe('DateRangePicker', () => {
         expect(onDayPickerFocusSpy.callCount).to.equal(1);
       });
 
-      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal', () => {
+      it('calls onDayPickerBlur if focusedInput and !withPortal/!withFullScreenPortal/!readOnly', () => {
         const wrapper = shallow((
           <DateRangePicker
             {...requiredProps}

diff --git a/test/components/SingleDatePicker_spec.jsx b/test/components/SingleDatePicker_spec.jsx
@@ -482,6 +482,18 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
+    it('calls onDayPickerFocus if readOnly', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          readOnly
+        />
+      )).dive();
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
     it('calls onDayPickerFocus if isTouchDevice', () => {
       const wrapper = shallow((
         <SingleDatePicker
@@ -494,6 +506,19 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
+    it('calls onDayPickerBlur if isTouchDevice and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+        />
+      )).dive();
+      wrapper.instance().isTouchDevice = true;
+      wrapper.instance().onFocus();
+      expect(onDayPickerBlurSpy.callCount).to.equal(1);
+    });
+
     it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal and keepFocusOnInput', () => {
       const wrapper = shallow((
         <SingleDatePicker
@@ -520,7 +545,21 @@ describe('SingleDatePicker', () => {
       expect(onDayPickerFocusSpy.callCount).to.equal(1);
     });
 
-    it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal', () => {
+
+    it('calls onDayPickerFocus if readOnly and keepFocusOnInput', () => {
+      const wrapper = shallow((
+        <SingleDatePicker
+          onDateChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          keepFocusOnInput
+          withFullScreenPortal
+        />
+      )).dive();
+      wrapper.instance().onFocus();
+      expect(onDayPickerFocusSpy.callCount).to.equal(1);
+    });
+
+    it('calls onDayPickerBlur if !withPortal/!withFullScreenPortal/!readOnly', () => {
       const wrapper = shallow((
         <SingleDatePicker
           onDateChange={sinon.stub()}