🐛 Fix #6252: Fix the toggle calendar utility to properly close the datepicker

[balajis-qb]

Description

Linked issue: #6252

Problem
As I mentioned in the attached ticket, we have an issue in toggling the calendar using toggleCalendarOnIconClick. The issue is with the ClickOutsideWrapper HOC. There we're listening globally for the mousedown to detect the clicks happening outside the DatePicker to auto-close the Datepicker. As we used the Browser API directly it's getting executed first and auto-close the datepicker. Later React delegates the synthetic event to the click handler of the CalendarIcon, as we wrote a logic to toggle the open state, it's reopening the datepicker.

Here the issue is with the ClickOutsideWrapper HOC. There we're checking whether the clicked target is an instance of HTMLElement, but the calendar icon is svg won't satisfy the condition. As a result we're treating the click happening on the SVG icon as a outside click and closing the datepicker.

Changes

1. I updated the check of is target of type HTMLElement to Element
2. Most of the times the click happens on the Path Elements of SVG and not on the parent svg itself. As a result our check of target.classList.contains(ignoreClass) will fail as we only added the ignoreClass to the parent svg and not to its child elements. So I updated the condition to target.closest(.${ignoreClass}) - as a result event it will consider the parent svg's ignoreClass
3. As the test cases of ClickOutsideWrapper already covers all the cases, I didn't add any extra test cases, but just updated the description of a test.

Note: This utility has a few accessibility related issues. I'll work on that in my upcoming PRs.

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.31%. Comparing base (548a1f3) to head (699278f).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6253      +/-   ##
==========================================
+ Coverage   99.29%   99.31%   +0.02%     
==========================================
  Files          30       30              
  Lines        3822     3822              
  Branches     1648     1665      +17     
==========================================
+ Hits         3795     3796       +1     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.