fix(calendar): info popover overlap

[hillaliy]

Homarr

Thank you for your contribution. Please ensure that your pull request meets the following pull request:

• Builds without warnings or errors (pnpm buid, autofix with pnpm format:fix)
• Pull request targets dev branch
• Commits follow the conventional commits guideline
• No shorthand variable names are used (eg. x, y, i or any abbrevation)

[deepsource-io]

Here's the code health analysis summary for commits c04c42d..4654101. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	21.56%	8693 / 40315
🔵	Statements	21.56%	8693 / 40315
🔵	Functions	26.8%	341 / 1272
🔵	Branches	62.45%	993 / 1590

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/widgets/src/calendar/calender-day.tsx	0%	0%	0%	0%	1-93
packages/widgets/src/calendar/component.tsx	0%	0%	0%	0%	1-130

Generated in workflow #4994 for commit 4654101 by the Vitest Coverage Report Action

[hillaliy]

Sorry about Semantic Commits, my mistake

[Meierschlumpf]

No problem 😉

[Meierschlumpf]

Can you check why the popover does not close? Mantine states it should close by default:
https://mantine.dev/core/popover/#click-outside

I would guess that the problem is that we use onClose. Can you try out with onChange instead and instead of useDisclosure use useState? Then also don't add onClick in the container as it's already done through the target.

In the component.tsx you will also need to change the line:

return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode} />;

to

return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode || events.length === 0} />;

as we want to disable the popover when no event exists for the day

[hillaliy]

Can you check why the popover does not close? Mantine states it should close by default: https://mantine.dev/core/popover/#click-outside

I would guess that the problem is that we use onClose. Can you try out with onChange instead and instead of useDisclosure use useState? Then also don't add onClick in the container as it's already done through the target.

In the component.tsx you will also need to change the line:

return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode} />;

to

return <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode || events.length === 0} />;

as we want to disable the popover when no event exists for the day

Popover don't work when removing onClick from container.

[Meierschlumpf]

Thank you!