fix(datepicker): pass through flatpickr inline prop (#9702)

* fix(datepicker): pass through flatpickr inline prop * fix(datepicker): ensure inline is not spread onto div
carbon-design-system · Sep 21, 2021 · e080720 · e080720
1 parent d545dd6
commit e080720
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
@@ -309,6 +309,7 @@ export default class DatePicker extends Component {
       onClose,
       disable,
       enable,
+      ...rest
     } = this.props;
     if (datePickerType === 'single' || datePickerType === 'range') {
       const onHook = (electedDates, dateStr, instance) => {
@@ -338,6 +339,7 @@ export default class DatePicker extends Component {
       // inputField ref might not be set in enzyme tests
       if (this.inputField) {
         this.cal = new flatpickr(this.inputField, {
+          inline: rest.inline ?? false,
           disableMobile: true,
           defaultDate: value,
           mode: datePickerType,
@@ -404,8 +406,17 @@ export default class DatePicker extends Component {
     value: prevValue,
     disable: prevDisable,
     enable: prevEnable,
+    ...prevRest
   }) {
-    const { dateFormat, minDate, maxDate, value, disable, enable } = this.props;
+    const {
+      dateFormat,
+      minDate,
+      maxDate,
+      value,
+      disable,
+      enable,
+      ...rest
+    } = this.props;
     if (this.cal) {
       if (prevDateFormat !== dateFormat) {
         this.cal.set({ dateFormat });
@@ -422,6 +433,9 @@ export default class DatePicker extends Component {
       if (enable !== prevEnable) {
         this.cal.set('enable', enable);
       }
+      if (rest.inline && rest.inline !== prevRest?.inline) {
+        this.cal.set('inline', rest.inline);
+      }
     }
 
     // Coordinate when the given `value` prop changes. When this happens, we
@@ -605,7 +619,8 @@ export default class DatePicker extends Component {
       onChange, // eslint-disable-line
       locale, // eslint-disable-line
       value, // eslint-disable-line
-      ...other
+      inline, // eslint-disable-line
+      ...rest
     } = this.props;
 
     const scope = this.context;
@@ -668,7 +683,7 @@ export default class DatePicker extends Component {
     });
     return (
       <div className={wrapperClasses}>
-        <div className={datePickerClasses} {...other}>
+        <div className={datePickerClasses} {...rest}>
           {childrenWithProps}
         </div>
       </div>