DatePickerInput type=range popoverProp onClose event prevents it from closing

[fozzarelo]

What package has an issue

@mantine/dates

Describe the bug

Dates/DatePickerInput/type=range/popoverProp/onClose event prevents it from closing.

I'm trying to append a footer to the dropDown component. I want to use the onOpen and onClose events in popoverProp to bring my footer about(by triggering a setState)

onOpen works with no issues: triggers then closes onClose when clicking in the input box it works as expected: triggers and closes onClose when clicking outside triggers, but the dropdown remains open.

Is this intended functionality? Can I close it programmatically? Call a close inside the onClose or can you suggest another workaround?

What version of @mantine/hooks page do you have in package.json?

6.0.4

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/interesting-sun-qmt8j6?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[hassanzohdy]

It seems to me it works fine, put the welcome text outside the InfoBox so outsideClick prop would work as expected.

https://codesandbox.io/s/charming-lovelace-oj94ec

[fozzarelo]

Hi, thank you @hassanzohdy

Sorry, it seems I kept working on the fork until I hit a solution. Here is a more straightforward reproduction of the bug:

https://codesandbox.io/s/onclosebug-qmt8j6?file=/src/App.tsx

I also found adding the 'opened' prop keeps onOpen from triggering. Here is a reproduction:

https://codesandbox.io/s/opened-onopenbug-txtyzj?file=/src/App.tsx

[fozzarelo]

The footer is still doable the bugs can be worked around, here goes an example in case someone finds it useful

https://codesandbox.io/s/works-using-click-outside-uj42ek?file=/src/App.tsx

[rtivital]

Fixed in 7.6.1