CalvinBackup/phishingclub
1
0
Fork 0
mirror of https://github.com/phishingclub/phishingclub.git synced 2026-06-02 04:41:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix dropdown overflow modal

Browse Source 
Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2025-10-21 19:04:23 +02:00
parent 4cf38996b3
commit a253fe560e
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Modal.svelte
+1 -1
View File
@@ -327,7 +327,7 @@
<img class="w-full" src="/close-white.svg" alt="" />
</button>
</div>
<div class="px-8 overflow-y-auto {scrollBarClassesVertical}">
<div class="px-8 overflow-y-auto overflow-x-visible {scrollBarClassesVertical}">
<slot />
</div>
</section>
frontend/src/lib/components/TextFieldSelect.svelte
+24 -4
View File
@@ -26,6 +26,7 @@
let inputElement;
let dropdownElement;
let justSelected = false;
let dropdownPosition = { top: 0, left: 0, width: 0 };
// Simple function to filter options based on input
const filterOptions = (searchValue) => {
@@ -51,6 +52,7 @@
showDropdown = true;
hasTyped = false; // Reset typing flag to show all options
allOptions = [...optionsArray]; // Show all options on focus
updateDropdownPosition();
}
justSelected = false; // Reset the flag
};
@@ -61,6 +63,7 @@
showDropdown = true;
hasTyped = true; // User has typed, enable filtering
allOptions = filterOptions(value);
updateDropdownPosition();
};
// Select an option
@@ -84,6 +87,18 @@
hasTyped = false; // Reset typing flag when closing
};
// Update dropdown position for fixed positioning
const updateDropdownPosition = () => {
if (inputElement) {
const rect = inputElement.getBoundingClientRect();
dropdownPosition = {
top: rect.bottom + 4,
left: rect.left,
width: rect.width
};
}
};
// Handle blur to close dropdown when tabbing out
const handleBlur = (e) => {
// Use setTimeout to allow click events on options to complete first
@@ -187,10 +202,14 @@
value = value || defaultValue;
const unsubscribe = activeFormElementSubscribe(_id, closeDropdown);
document.addEventListener('click', handleOutsideClick);
window.addEventListener('scroll', updateDropdownPosition, true);
window.addEventListener('resize', updateDropdownPosition);
return () => {
unsubscribe();
document.removeEventListener('click', handleOutsideClick);
window.removeEventListener('scroll', updateDropdownPosition, true);
window.removeEventListener('resize', updateDropdownPosition);
};
});
@@ -215,6 +234,8 @@
parentForm.removeEventListener('reset', parentFormResetListener);
}
document.removeEventListener('click', handleOutsideClick);
window.removeEventListener('scroll', updateDropdownPosition, true);
window.removeEventListener('resize', updateDropdownPosition);
});
// Generate unique IDs for accessibility
@@ -323,15 +344,14 @@
{#if showDropdown}
<div
bind:this={dropdownElement}
class="absolute top-10 z-50"
class:w-28={size == 'small'}
class:w-60={size == 'normal'}
class="fixed z-[9999]"
style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
>
<ul
id={listboxId}
role="listbox"
aria-labelledby={labelId}
class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[9999] rounded-md min-w-fit shadow-lg border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
>
{#if allOptions.length}
{#each allOptions as option, index}