Component
Calendar
Describe the bug
The assigned callback function for onYearMonthDisplayChange is invoked when the Calendar component is mounted onto the DOM.
To Reproduce
Steps to reproduce the behavior:
- Render the Calendar component and provide a callback function to the prop
onYearMonthDisplayChange
- Go to the browser to view the Calendar
onYearMonthDisplayChange callback is invoked when Calendar component is mounted to the DOM even when there is no interaction to trigger the callback.
Expected behavior
onYearMonthDisplayChange should not be invoked when the Calendar component mounts. This callback should be invoked when the year or month of the calendar changes. (e.g. when clicking on the month selector, year selector or left right navigation buttons. These buttons can be found on the top left and top right of the Calendar component)
Screenshots
Additional context
You may do a simple replication to console.log something from the callback function to check on the issue.
Our current UI is to call an API to fetch the available dates when year or month changes. During the API fetch, we render a Loading component which unmounts the Calendar. Once the fetch is done, we mount the Calendar component back. In this scenario, we have an infinite loop to calling the API. API is called when the Calendar mounts, this triggers the Loading component to mount and Calendar to unmount, followed by the Calendar mounting again when the API is done fetching and triggering the API call again.
Component
Calendar
Describe the bug
The assigned callback function for
onYearMonthDisplayChangeis invoked when theCalendarcomponent is mounted onto the DOM.To Reproduce
Steps to reproduce the behavior:
onYearMonthDisplayChangeonYearMonthDisplayChangecallback is invoked when Calendar component is mounted to the DOM even when there is no interaction to trigger the callback.Expected behavior
onYearMonthDisplayChangeshould not be invoked when the Calendar component mounts. This callback should be invoked when the year or month of the calendar changes. (e.g. when clicking on the month selector, year selector or left right navigation buttons. These buttons can be found on the top left and top right of the Calendar component)Screenshots
Additional context
You may do a simple replication to
console.logsomething from the callback function to check on the issue.Our current UI is to call an API to fetch the available dates when year or month changes. During the API fetch, we render a
Loadingcomponent which unmounts the Calendar. Once the fetch is done, we mount the Calendar component back. In this scenario, we have an infinite loop to calling the API. API is called when the Calendar mounts, this triggers the Loading component to mount and Calendar to unmount, followed by the Calendar mounting again when the API is done fetching and triggering the API call again.