From 97113e2701bf4ba2f5a08b1eadcb50aeeedeb108 Mon Sep 17 00:00:00 2001 From: smesgr Date: Mon, 9 Apr 2018 15:07:07 +0200 Subject: [PATCH 1/4] fix day picker for IE11 --- src/DayPickerInput.js | 44 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js index aaebeaae94..92afd4db18 100644 --- a/src/DayPickerInput.js +++ b/src/DayPickerInput.js @@ -167,6 +167,8 @@ export default class DayPickerInput extends React.Component { componentWillUnmount() { clearTimeout(this.clickTimeout); clearTimeout(this.hideTimeout); + clearTimeout(this.ieInputFocusTimeout); + clearTImeout(this.ieInputBlurTimeout); } getStateFromProps(props) { @@ -202,11 +204,34 @@ export default class DayPickerInput extends React.Component { return this.daypicker; } + isIE() { + return /*@cc_on!@*/false || !!document.documentMode; + } + + setStateFrom(relatedTarget) { + this.setState({ + showOverlay: + this.overlayNode && this.overlayNode.contains(relatedTarget), + }); + } + + resetHideTimeout() { + if(this.hideTimeout) { + this.hideTimeout = setTimeout(() => { + this.hideDayPicker(); + this.hideTimeout = null; + }, HIDE_TIMEOUT); + } + } + + input = null; daypicker = null; overlayNode = null; clickTimeout = null; hideTimeout = null; + ieInputFocusTimeout = null; + ieInputBlutTimeout = null; /** * Update the component's state and fire the `onDayChange` event @@ -283,10 +308,12 @@ export default class DayPickerInput extends React.Component { } handleInputBlur(e) { - this.setState({ - showOverlay: - this.overlayNode && this.overlayNode.contains(e.relatedTarget), - }); + if(this.isIE()) { + this.ieInputBlurTimeout = setTimeout(() => + this.setStateFrom(e.relatedTarget), HIDE_TIMEOUT); + } else { + this.setStateFrom(e.relatedTarget); + } if (this.props.inputProps.onBlur) { e.persist(); this.props.inputProps.onBlur(e); @@ -296,7 +323,14 @@ export default class DayPickerInput extends React.Component { handleOverlayFocus(e) { if (this.props.keepFocus === true) { e.preventDefault(); - this.input.focus(); + if(this.isIE()) { + this.ieInputFocusTimeout = setTimeout(() => { + this.input.focus(); + this.resetHideTimeout(); + }, HIDE_TIMEOUT); + } else { + this.input.focus(); + } } } From 6701dc4127da069dc81b14d4876440a0cec67069 Mon Sep 17 00:00:00 2001 From: smesgr Date: Mon, 9 Apr 2018 15:10:00 +0200 Subject: [PATCH 2/4] fix typo in clearTimeout --- src/DayPickerInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js index 92afd4db18..2a011200b8 100644 --- a/src/DayPickerInput.js +++ b/src/DayPickerInput.js @@ -168,7 +168,7 @@ export default class DayPickerInput extends React.Component { clearTimeout(this.clickTimeout); clearTimeout(this.hideTimeout); clearTimeout(this.ieInputFocusTimeout); - clearTImeout(this.ieInputBlurTimeout); + clearTimeout(this.ieInputBlurTimeout); } getStateFromProps(props) { From 79706723cce3fa5a4b36c8cec1108e920dbcf14b Mon Sep 17 00:00:00 2001 From: smesgr Date: Mon, 9 Apr 2018 15:36:17 +0200 Subject: [PATCH 3/4] silence (most) eslint --- src/DayPickerInput.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js index 2a011200b8..7a225cdc1c 100644 --- a/src/DayPickerInput.js +++ b/src/DayPickerInput.js @@ -204,27 +204,25 @@ export default class DayPickerInput extends React.Component { return this.daypicker; } - isIE() { - return /*@cc_on!@*/false || !!document.documentMode; - } - setStateFrom(relatedTarget) { this.setState({ - showOverlay: - this.overlayNode && this.overlayNode.contains(relatedTarget), + showOverlay: this.overlayNode && this.overlayNode.contains(relatedTarget), }); } + isIE() { + return /*@cc_on!@*/false || !!document.documentMode; + } + resetHideTimeout() { - if(this.hideTimeout) { - this.hideTimeout = setTimeout(() => { - this.hideDayPicker(); - this.hideTimeout = null; - }, HIDE_TIMEOUT); + if (this.hideTimeout) { + this.hideTimeout = setTimeout(() => { + this.hideDayPicker(); + this.hideTimeout = null; + }, HIDE_TIMEOUT); } } - input = null; daypicker = null; overlayNode = null; @@ -308,11 +306,13 @@ export default class DayPickerInput extends React.Component { } handleInputBlur(e) { - if(this.isIE()) { - this.ieInputBlurTimeout = setTimeout(() => - this.setStateFrom(e.relatedTarget), HIDE_TIMEOUT); + if (this.isIE()) { + this.ieInputBlurTimeout = setTimeout( + () => this.setStateFrom(e.relatedTarget), + HIDE_TIMEOUT + ); } else { - this.setStateFrom(e.relatedTarget); + this.setStateFrom(e.relatedTarget); } if (this.props.inputProps.onBlur) { e.persist(); @@ -323,11 +323,11 @@ export default class DayPickerInput extends React.Component { handleOverlayFocus(e) { if (this.props.keepFocus === true) { e.preventDefault(); - if(this.isIE()) { + if (this.isIE()) { this.ieInputFocusTimeout = setTimeout(() => { - this.input.focus(); - this.resetHideTimeout(); - }, HIDE_TIMEOUT); + this.input.focus(); + this.resetHideTimeout(); + }, HIDE_TIMEOUT); } else { this.input.focus(); } From 10f15e13c130ce16ba651c52c7a96bec16775bde Mon Sep 17 00:00:00 2001 From: smesgr Date: Mon, 9 Apr 2018 15:41:59 +0200 Subject: [PATCH 4/4] update test --- test/daypickerinput/rendering.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/daypickerinput/rendering.js b/test/daypickerinput/rendering.js index 22b02a3b80..d81c3b7f1e 100644 --- a/test/daypickerinput/rendering.js +++ b/test/daypickerinput/rendering.js @@ -114,7 +114,7 @@ describe('DayPickerInput', () => { mount(, { attachTo: container }); const spy = jest.spyOn(window, 'clearTimeout'); ReactDOM.unmountComponentAtNode(container); - expect(spy).toHaveBeenCalledTimes(2); + expect(spy).toHaveBeenCalledTimes(4); spy.mockRestore(); }); it('should set today when clicking on today button', () => {