Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix/#2867 Fixes popup disappearing in Input Autocompete #2937

Merged
merged 8 commits into from
Dec 17, 2024
5 changes: 5 additions & 0 deletions .changeset/seven-avocados-clean.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@skeletonlabs/skeleton": patch
---

bugfix: fix popup disappearing when dragging mouse out of the input box
12 changes: 11 additions & 1 deletion packages/skeleton/src/lib/utilities/Popup/popup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,14 +136,22 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
function toggle(): void {
popupState.open === false ? open() : close();
}

function handleMouseUp(event: MouseEvent) {
if (!triggerNode.contains(event.target as Node)) close();
}
Comment on lines +140 to +142
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@endigo9740 After a bit of digging, I think this is the root cause for #3075.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@phamduylong I see. Well I'd welcome a fix if possible. We're only due for about 1 more release of v2 before we archived it, but I'm certain I'm not going to have time to address this directly.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nullpointerexceptionkek FYI as well in case you guys want to talk through this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll take a look at it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function handleMouseUp is a fix, or else when the user have an popup open and copies a text outside by dragging the mouse, the popup will not be closed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have PR the changes @phamduylong


function onWindowClick(event: any): void {
// Return if the popup is not yet open
if (popupState.open === false) return;
// Return if click is the trigger element
if (triggerNode.contains(event.target)) return;
// If click it outside the popup
if (elemPopup && elemPopup.contains(event.target) === false) {
close();
const selection = window.getSelection();
if (selection && selection.toString().length == 0) {
close();
}
return;
}
// Handle Close Query State
Expand Down Expand Up @@ -187,6 +195,7 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
switch (args.event) {
case 'click':
triggerNode.addEventListener('click', toggle, true);
window.addEventListener('mouseup', handleMouseUp, true);
window.addEventListener('click', onWindowClick, true);
break;
case 'hover':
Expand Down Expand Up @@ -228,6 +237,7 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
triggerNode.removeEventListener('blur', () => close(), true);
// Window Events
window.removeEventListener('click', onWindowClick, true);
window.removeEventListener('mouseup', handleMouseUp, true);
window.removeEventListener('keydown', onWindowKeyDown, true);
}
};
Expand Down
2 changes: 1 addition & 1 deletion packages/skeleton/src/lib/utilities/Toast/Toast.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ describe('Toast.svelte', () => {
const [wrapperVisibilityOnAToBChange, wrapperVisibilityAfterAOutroFinishes, wrapperVisibilityAfterBOutroFinishes] = await Promise.all([
getWrapperElementAfterTimeout(10),
getWrapperElementAfterTimeout(16),
getWrapperElementAfterTimeout(50)
getWrapperElementAfterTimeout(80)
]);

expect(wrapperVisibilityOnAToBChange).toBeTruthy();
Expand Down
Loading