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

[balajis-qb]

Description

Linked issue: Hacker0x01#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.

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.