Fix bug with blurring input caused both inputs to update to blurred i…

…nput’s date

Previously when blurring input #1 the value would be automatically be “copied” to input #2 if input #1’s value was the same as that stored in state. This is due to the way the DateUtils.addDayToRange() method works. Fix this by checking whether the value of the input that has just been blurred is the same as that stored in state. If so then don’t trigger an update of the selected date range. Adds test coverage.

client/my-sites/media-library/media-date-range.jsx

@@ -91,6 +91,7 @@ export class MediaDateRange extends Component {
 
 	handleInputBlur( e ) {
 		const val = e.target.value;
+		const startOrEnd = e.target.id;
 		const date = this.props.moment( val );
 		const today = this.props.moment();
 		const epoch = this.props.moment( '01/01/1970' );
@@ -117,7 +118,13 @@ export class MediaDateRange extends Component {
 		}
 
 		// If the new date in the blurred input is valid...
-		if ( date.isValid() && date.isSameOrAfter( epoch ) && date.isSameOrBefore( today ) ) {
+		// ...and it's
+		if (
+			date.isValid() &&
+			date.isSameOrAfter( epoch ) &&
+			date.isSameOrBefore( today ) &&
+			! this.state[ startOrEnd ].isSame( date, 'day' )
+		) {
 			this.onSelectDate( date );
 		}
 	}
@@ -146,7 +153,7 @@ export class MediaDateRange extends Component {
 					inputToDate: this.nativeDateToMoment( newRange.to ).format( 'L' ),
 				};
 
-				// For first date selection only: take a record of previous dates
+				// For first date selection only: "cache" previous dates
 				// just in case user doesn't "Apply" and we need to revert
 				// to the original dates
 				if ( ! this.state.oldDatesSaved ) {

client/my-sites/media-library/test/media-data-range.jsx

@@ -234,6 +234,23 @@ describe( 'MediaDateRange', () => {
 			);
 		} );
 
+		test( 'should not update start/end date selection if the new input date value is the same as that stored in state', () => {
+			const wrapper = shallow(
+				<MediaDateRange startDate={ momentStartDate } endDate={ momentEndDate } moment={ moment } />
+			);
+
+			const startDateInput = wrapper.find( '#startDate' );
+			startDateInput.simulate( 'blur', startDateEvent );
+
+			expect( wrapper.state().startDate.format( 'DD/MM/YYYY' ) ).toEqual(
+				momentStartDate.format( 'DD/MM/YYYY' )
+			);
+
+			expect( wrapper.state().endDate.format( 'DD/MM/YYYY' ) ).toEqual(
+				momentEndDate.format( 'DD/MM/YYYY' )
+			);
+		} );
+
 		test( 'should not update start/end dates if input date is invalid', () => {
 			const wrapper = shallow( <MediaDateRange moment={ moment } /> );
 			const invalidDateString = '01/04/invaliddatestring';