[Bug]: <DatePicker> hosted inside of <Modal> or <ComposedModal> does not close calendar when clicking outside

[liunate]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

v1.56.0

React version

v18

Description

When a is hosted inside of either or , click on the and the calendar popover can not be dismissed by clicking outside of the calendar.

datpicker-calendar-does-not-dismiss.mov

Reproduction/example

https://stackblitz.com/edit/github-datbmn?file=src%2FApp.jsx

Steps to reproduce

1. The example already has the modal opened by default. Click on the date input, and no matter where you click inside the <ComposedModal> and outside of the calendar, the calendar just does not close. It can only be closed by tab away or select the date.
2. Close the modal by clicking the close button.
3. There is another <DatePicker outside of <ComposedModal>. It has no problem closes its calendar popover by clicking elsewhere in the page.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[liunate]

I have looked into the <ComposedModal> source and the root cause is the onMouseDown event is stopped by the component:

carbon/packages/react/src/components/ComposedModal/ComposedModal.tsx

Line 292 in ad1362c

evt.stopPropagation();

    function handleMousedown(evt: React.MouseEvent<HTMLDivElement>) {
      const target = evt.target as Node;
      evt.stopPropagation();

I believe the underlying flatpickr calendar library attaches the eventhandler to close calendar on click at higher element in the DOM hierarhcy, maybe document or body, and the <ComposedModal> component just stops the event from bubbling up.

I haven't found flatpickr API to specify the element to listen to the click event, but I can work around this issue by listening to MouseDown event when the event is triggered from element other than the <DateInput> or <DatePicker> elements, and call the flatpickrInstance.close() imperative API.

Something like this should work around the issue:

// in the rendering body of the component rendering `<Modal>`

  function closeCalendarWhenClickingOutsideOfDateSection(e) {
    if (dateSectionRef.current.contains(e.target)) {
      return;
    }

    flatpickrInstanceRef.current.close();
  }

return (
  <ComposedModal>
    <div onMouseDown={closeCalendarWhenClickingOutsideOfDateSection} >
         <div ref={dateSectionRef}>
              <!-- other modal body elements -->
              <DatePicker onOpen={ (...args) => flatpickrInstanceRef.current = args[2] }>
                     <DateInput>
              <!-- other modal body elements-->        

[2nikhiltom]

fixed via #17154