fix(DatePicker): make appendTo back working (#4215)

Fixes #4158.
carbon-design-system · Oct 22, 2019 · 6a6c2dc · 6a6c2dc
1 parent f37bd54
commit 6a6c2dc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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={() => {}}>
         <DatePickerInput
           key="label"
@@ -163,6 +164,12 @@ describe('DatePicker', () => {
       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
@@ -274,9 +274,9 @@ export default class DatePicker extends Component {
     ]),
 
     /**
-     * The DOM element or selector the Flatpicker should be inserted into. `<body>` by default.
+     * The DOM element the Flatpicker should be inserted into. `<body>` 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,