DatePicker closes automatically once date is selected

[sehrish30]

if you check the first example here

https://shahabyazdi.github.io/react-multi-date-picker/events/

the dropdown automatically closes once I select the date. Is there anyway i can control the open and close state of the DatePicker.

One option can be to use onClose or using ref but how can i stop the Datepicker from being closed once date has been set

` const handleDate = (date: DateObject | DateObject[]) => { setTempValue(date); datePickerRef.current?.openCalendar(); };

onChange={handleDate} `

still the calendar closes :/ please its urgent can someone help me with it

[allan-vera]

maybe this can help?

https://github.com/shahabyazdi/react-multi-date-picker/issues/263

[sehrish30]

maybe this can help?

263

I am using the "renderButton" prop I cannot use the conditional rendering technique. Best could be to have a props to handle visibility of calendar

[david-storm94]

I'm having the same issue @sehrish30. Did you find a good solution?

I am using it together with the time picker plugin. From a UX perspective, selecting the date and then having to open Datepicker again to select the time feels a bit weird.

[nonnullish]

for anyone that's stuck on this, here's my solution - this only closes the calendar when the click is outside of the element. in my actual implementation this is on only when I'm rendering the timepicker

const ref = useRef<HTMLElement>();
const [shouldClose, setShouldClose] = useState(false);

...

const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  const isClickOutside = !ref.current?.contains(target);
  setShouldClose(isClickOutside);
};

useEffect(() => {
  document.addEventListener('click', handleClickOutside, true);
  return () => document.removeEventListener('click', handleClickOutside, true);
}, []);

...

<DatePicker
  ...
  ref={ref}
  onClose={() => shouldClose}
/>