shahabyazdi / react-multi-date-picker

a simple React datepicker component for working with gregorian, persian, arabic and indian calendars
https://shahabyazdi.github.io/react-multi-date-picker/
MIT License
814 stars 101 forks source link

[Bug] State Update Without Re-render When Using Custom Timepicker with Range Picker #299

Open vc-vishal opened 3 months ago

vc-vishal commented 3 months ago

Environment React: 16.14.0 react-multi-date-picker: ^4.5.2 Browser: Chrome (latest) Operating System: Windows 10

Issue Description:

When integrating the react-multi-date-picker package in my application with custom Timepicker and footer buttons (Apply and Cancel), I noticed that the package is updating state directly without causing a re-render. This leads to inconsistent state management and unexpected behavior.

I knew this package works without state, but I didn't imagine how problematic this feature would be for my requirement.

1st I have implemented custom Timepicker which have double Time select.

2nd I have implemented Cancel and Apply buttons in footer plugin. I have managed Apply and Cancel button using multiple states.

Additionally, I implemented a custom timepicker plugin that does not use the state and handler provided by this package. Despite this, the package is updating my state without following React's conventions, causing state updates without re-renders.

Watch console.log("selectedRange OutSide", selectedRange?.toString()); when updating time from timepicker.

codesandbox:

As this is React package, I recommend that this package should provide a way to work fully controlled with React states.