Date Picker crashing CMS in list widget

[thebetternewt]

- Do you want to request a feature or report a bug?

- What is the current behavior?

- If the current behavior is a bug, please provide the steps to reproduce.

- What is the expected behavior?

- Please mention your CMS, node.js, and operating system version.

- Please link or paste your config.yml below if applicable.

I am trying to add a list widget with multiple date fields. However, the first field in the list crashes the CMS when I pick a date from the datepicker widget. With multiple date fields present, the last one also seems to be the only one showing today's date as default. Fields do not seem to be responding to default values described in config.yml.

Here is my config file:
config.yml

The list is under the "date_settings" file declaration, under "blackout_dates".

Thanks!

[tech4him1]

Error message being thrown when a date is selected:

Uncaught Error: Objects are not valid as a React child (found: object with keys {_isAMomentObject, _strict, _isUTC, _pf, _locale, _d, _isValid}). If you meant to render a collection of children, use an array instead.
    in div
    in div (created by list-item)
    in list-item (created by sortableElement(list-item))
    in sortableElement(list-item)
    in div
    in Unknown (created by sortableList)
    in sortableList (created by ListControl)
    in div (created by ListControl)
    in ListControl (created by Widget)
    in Widget (created by EditorControl)
    in div (created by EditorControl)
    in EditorControl (created by ControlPane)
    in div (created by ControlPane)
    in ControlPane (created by EditorInterface)
    in div (created by EditorInterface)
    in div (created by EditorInterface)
    in div (created by EditorInterface)
    in div (created by EditorInterface)
    in EditorInterface (created by Editor)
    in Editor (created by Component)
    in Component (created by Connect(Component))
    in Connect(Component) (created by Connect(Connect(Component)))
    in Connect(Connect(Component)) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Root)
    in Provider (created by Root)
    in ErrorBoundary (created by Root)
    in Root
    at invariant (invariant.js?c115:42)
    at throwOnInvalidObjectType (react-dom.development.js?054f:6748)
    at reconcileChildFibers (react-dom.development.js?054f:7680)
    at reconcileChildrenAtExpirationTime (react-dom.development.js?054f:7788)
    at reconcileChildren (react-dom.development.js?054f:7771)
    at updateHostComponent (react-dom.development.js?054f:8024)
    at beginWork (react-dom.development.js?054f:8257)
    at performUnitOfWork (react-dom.development.js?054f:10244)
    at workLoop (react-dom.development.js?054f:10308)
    at HTMLUnknownElement.callCallback (react-dom.development.js?054f:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?054f:579)
    at invokeGuardedCallback (react-dom.development.js?054f:436)
    at renderRoot (react-dom.development.js?054f:10386)
    at performWorkOnRoot (react-dom.development.js?054f:11000)
    at performWork (react-dom.development.js?054f:10952)
    at batchedUpdates (react-dom.development.js?054f:11070)
    at batchedUpdates (react-dom.development.js?054f:2323)
    at dispatchEvent (react-dom.development.js?054f:3414)

[tech4him1]

Tracing the error, the last div on the call stack is:
https://github.com/netlify/netlify-cms/blob/952a6d509f4e681d4757bef51d4b2011c72f77ad/src/components/EditorWidgets/List/ListControl.js#L237

This means that for some reason when the date field is changed, objectLabel(item) isn't returning a valid React component.

[tech4him1]

The objectLabel function is what is used to show what a list item is when it is collapsed. We will need to make sure this is always a string, not an object.

https://github.com/netlify/netlify-cms/blob/952a6d509f4e681d4757bef51d4b2011c72f77ad/src/components/EditorWidgets/List/ListControl.js#L191-L198

[tech4him1]

@thebetternewt I have a fix for the crashing issue in the linked PR, it should be merged as soon as another maintainer can review. I think the weirdness of only the last date field showing a default should be a separate issue, would you wind splitting that out?

The bug only happens if a date field is the first field under a list item. As a workaround until it is fixed, if you don't have any string fields that you have first, you can add a hidden field before the date fields, like so:

            fields:
              - {name: "Label", widget: "hidden"}
              - {label: "Start Date", name: "start_date", widget: "date"}
              - {label: "End Date", name: "end_date", widget: "date"}

[thebetternewt]

@tech4him1 Thanks! That seems to work. I decided to add a string label for each date range anyway for reference purposes, so good to know my code works.

I'll put in a separate request for the default date not showing up.