Bug - DatePicker with Calendar - Carbon for React

[tahaimt]

Datepicker open and set methods are not available in mobile devices. Due to as issue with rerendering of the input after the maxDate and minDate prop values are changed, I was advised to use set method using the datepicker ref (ref.current.cal.set({ maxDate: new Date() })) which wont work on android.

What package(s) are you using?

• carbon-components - ver: 10.5.1
• carbon-components-react - ver: 7.5.1

Detailed description

Throwing errors on console when opened in mobile view

Steps to reproduce the issue

1. Open a new tab with dev tools in Chrome
2. Go to React Storybook link for Datepicker
3. Switch to mobile view
4. Click on the date input or calendar icon in the date input
5. Check console
6. You should see an error

vendors~main.ea56bc5986fd20de4d78.bundle.js:93 Uncaught TypeError: _this.cal.open is not a function

I think the calendar implementation is done differently for different devices. I opened the link on my android phone and it opened the android calendar. However, since I am using internal methods of datepicker for my use case and although it works fine on desktop, it wont on mobile.

[tahaimt]

I am also getting the following errors when a component with DatePicker is unloaded in Mobile mode in Chrome Development Tools

DatePicker.js:455 Uncaught TypeError: this.cal.destroy is not a function
at DatePicker.componentWillUnmount (DatePicker.js:455)
at callComponentWillUnmountWithTimer (react-dom.development.js:17932)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at safelyCallComponentWillUnmount (react-dom.development.js:17939)
at commitUnmount (react-dom.development.js:18369)
at commitNestedUnmounts (react-dom.development.js:18405)
at unmountHostComponents (react-dom.development.js:18692)
at commitDeletion (react-dom.development.js:18756)
at commitAllHostEffects (react-dom.development.js:19621)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at commitRoot (react-dom.development.js:19860)
at react-dom.development.js:21446
at Object.unstable_runWithPriority (scheduler.development.js:255)
at completeRoot (react-dom.development.js:21445)
at performWorkOnRoot (react-dom.development.js:21368)
at performWork (react-dom.development.js:21273)
at performSyncWork (react-dom.development.js:21247)
at interactiveUpdates$1 (react-dom.development.js:21532)
at interactiveUpdates (react-dom.development.js:2268)
at dispatchInteractiveEvent (react-dom.development.js:5086)

[asudoh]

Hi 👋 what carbon-components-react version are you on? Ref: abe2439

[tahaimt]

@asudoh ver: 7.5.1

[tahaimt]

I just updated the version to 7.7.1 and I am still getting the following error when component is unloaded.

DatePicker.js:459 Uncaught TypeError: this.cal.destroy is not a function