From 6a6c2dcaff7a3dd7688705dee01422d8163602ef Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 10 Oct 2019 13:30:23 +0900 Subject: [PATCH] fix(DatePicker): make appendTo back working (#4215) Fixes #4158. --- .../react/src/components/DatePicker/DatePicker-test.js | 7 +++++++ packages/react/src/components/DatePicker/DatePicker.js | 9 ++++----- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js index 9de8353b7536..9c6e2900bbcb 100644 --- a/packages/react/src/components/DatePicker/DatePicker-test.js +++ b/packages/react/src/components/DatePicker/DatePicker-test.js @@ -146,6 +146,7 @@ describe('DatePicker', () => { datePickerType="single" dateFormat="m/d/Y" value={'02/26/2017'} + appendTo={document.body.firstChild} onChange={() => {}}> { wrapper.setProps({ value: '02/17/2017' }); expect(wrapper.props().value).toEqual('02/17/2017'); }); + + it('sends appendTo to Flatpickr', () => { + expect(wrapper.instance().cal.config.appendTo).toBe( + document.body.firstChild + ); + }); }); describe('Range date picker', () => { diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js index 9261e9ddfa23..4a4fa4e2149f 100644 --- a/packages/react/src/components/DatePicker/DatePicker.js +++ b/packages/react/src/components/DatePicker/DatePicker.js @@ -274,9 +274,9 @@ export default class DatePicker extends Component { ]), /** - * The DOM element or selector the Flatpicker should be inserted into. `` by default. + * The DOM element the Flatpicker should be inserted into. `` by default. */ - appendTo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + appendTo: PropTypes.object, /** * The `change` event handler. @@ -321,6 +321,7 @@ export default class DatePicker extends Component { componentDidMount() { const { + appendTo, datePickerType, dateFormat, locale, @@ -334,13 +335,11 @@ export default class DatePicker extends Component { this.updateClassNames(instance); }; - let appendToNode; - // inputField ref might not be set in enzyme tests if (this.inputField) { this.cal = new flatpickr(this.inputField, { defaultDate: value, - appendTo: appendToNode, + appendTo, mode: datePickerType, allowInput: true, dateFormat: dateFormat,