@finsweet/webflow-apps-utils 1.0.54 → 1.0.56

package/dist/ui/components/select/Select.svelte

@@ -101,8 +101,8 @@
 		const handleGlobalKeyDown = (event: KeyboardEvent) => {
 			if (event.key === 'Escape' && closeOnEscape && isOpen) {
 				event.preventDefault();
+				event.stopPropagation();
 				closeDropdown();
-				// Remove focus to prevent focus ring after closing
 				if (document.activeElement instanceof HTMLElement) {
 					document.activeElement.blur();
 				}
@@ -334,7 +334,7 @@
 		if (!dropdownItems || !target) return instances;
 
 		if (closeOnClickOutside) {
-			document?.addEventListener('click', dismissTooltip);
+			document?.addEventListener('click', dismissTooltip, true);
 		}
 		instances.push(setupDropdown(target, dropdownItems));
 
@@ -347,7 +347,7 @@
 	const cleanupDropdownInstances = (instances: DropdownInstance[]) => {
 		instances.forEach((instance) => instance.cleanup());
 		if (closeOnClickOutside) {
-			document?.removeEventListener('click', dismissTooltip);
+			document?.removeEventListener('click', dismissTooltip, true);
 		}
 	};
 
@@ -386,35 +386,40 @@
 		const showDropdown = () => {
 			if (disabled) return;
 
+			// Show the dropdown FIRST so elements are focusable before calling focus()
 			tooltip.setAttribute('aria-hidden', 'false');
+			tooltip.style.display = 'flex';
+			isOpen = true;
+			isFocused = true;
 			update();
 
 			const selectedItemButton = tooltip.querySelector(
 				`.dropdown-item[aria-selected="true"]`
 			) as HTMLElement;
 			const firstItemButton = tooltip.querySelector('.dropdown-item') as HTMLElement;
-			const itemToFocus = selectedItemButton || firstItemButton;
 
 			const searchInput = tooltip?.querySelector<HTMLInputElement>('input[type="text"]');
-			if (searchInput && enableSearch) {
+			if (selectedItemButton) {
+				selectedItemButton.focus();
+				if (lastHoveredItem) {
+					lastHoveredItem.classList.remove('hover-state');
+					lastHoveredItem.setAttribute('tabindex', '-1');
+				}
+				lastHoveredItem = selectedItemButton;
+				lastHoveredItem.classList.add('hover-state');
+				lastHoveredItem.setAttribute('tabindex', '0');
+			} else if (searchInput && enableSearch) {
 				searchInput.focus();
-			} else {
-				if (itemToFocus) {
-					itemToFocus.focus();
-
-					if (lastHoveredItem) {
-						lastHoveredItem.classList.remove('hover-state');
-						lastHoveredItem.setAttribute('tabindex', '-1');
-					}
-					lastHoveredItem = itemToFocus;
-					lastHoveredItem.classList.add('hover-state');
-					lastHoveredItem.setAttribute('tabindex', '0');
+			} else if (firstItemButton) {
+				firstItemButton.focus();
+				if (lastHoveredItem) {
+					lastHoveredItem.classList.remove('hover-state');
+					lastHoveredItem.setAttribute('tabindex', '-1');
 				}
+				lastHoveredItem = firstItemButton;
+				lastHoveredItem.classList.add('hover-state');
+				lastHoveredItem.setAttribute('tabindex', '0');
 			}
-
-			tooltip.style.display = 'flex';
-			isOpen = true;
-			isFocused = true;
 		};
 
 		const options: EventOption[] = [['click', showDropdown]].filter(Boolean) as EventOption[];
@@ -477,10 +482,13 @@
 </script>
 
 {#snippet selectWrapper()}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="dropdown-wrapper {className}"
 		bind:this={dropdownWrapper}
 		style="{hide ? 'display:none;' : ''} width: {width};"
+		onclick={(e) => e.stopPropagation()}
 	>
 		<div
 			class="dropdown"
@@ -509,12 +517,14 @@
 				</div>
 			</div>
 
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				tabindex={disabled || isOpen ? -1 : 0}
 				class="dropdown-list"
 				class:has-footer={footer}
 				role="listbox"
 				style="width:{dropdownWidth};"
+				onclick={(e) => e.stopPropagation()}
 				onkeydown={(e) => {
 					e.stopPropagation();
 					e.preventDefault();
@@ -569,6 +579,9 @@
 							onkeydown={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
+								if (e.key === 'Escape' && closeOnEscape) {
+									closeDropdown();
+								}
 							}}
 							onmouseenter={handleMouseEnter}
 							aria-hidden={!isOpen}

package/dist/ui/components/select/SelectInModal.stories.js

@@ -0,0 +1,18 @@
+import SelectInModalStory from './SelectInModalStory.svelte';
+const meta = {
+    title: 'Ui/Select/InModal',
+    component: SelectInModalStory,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Testing Modal with Select component to ensure proper event handling'
+            }
+        }
+    },
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {
+    args: {}
+};

package/dist/ui/components/select/SelectInModalStory.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Button } from '../button';
+	import Modal from '../modal/Modal.svelte';
+	import Select from './Select.svelte';
+	import type { SelectOption } from './types';
+
+	interface Props {
+		initialOpen?: boolean;
+	}
+
+	let { initialOpen = false }: Props = $props();
+
+	let modalOpen = $state(initialOpen);
+	let selectedValue = $state<string | null>(null);
+
+	const options: SelectOption[] = [
+		{ label: 'Option 1', value: 'option1' },
+		{ label: 'Option 2', value: 'option2' },
+		{ label: 'Option 3', value: 'option3' },
+		{ label: 'Option 4', value: 'option4' },
+		{ label: 'Option 5', value: 'option5' }
+	];
+
+	const handleOpenModal = () => {
+		modalOpen = true;
+	};
+
+	const handleCloseModal = () => {
+		console.log('Modal closing');
+		modalOpen = false;
+	};
+</script>
+
+<div style="padding: 20px;">
+	<Button onclick={handleOpenModal}>Open Modal with Select</Button>
+
+	<Modal
+		open={modalOpen}
+		onOpenChange={(open) => {
+			console.log('Modal onOpenChange:', open);
+			modalOpen = open;
+		}}
+		title="Select Example Inside Modal"
+		showFooter={false}
+		width="400px"
+		closeOnOverlayClick={false}
+		closeOnEscape={false}
+	>
+		<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+			<p style="color: var(--text1); margin: 0;">Test the following behaviors:</p>
+			<ul style="color: var(--text2); margin: 0; padding-left: 20px;">
+				<li>Click outside the modal (overlay) - modal stays open (disabled)</li>
+				<li>Press Escape with select closed - modal stays open (disabled)</li>
+				<li>Press Escape with select open - should close select only</li>
+				<li>Click outside select but inside modal - should close select only</li>
+				<li>Use "Close Modal" button to close the modal</li>
+			</ul>
+
+			<Select
+				{options}
+				bind:selected={selectedValue}
+				defaultText="Choose an option"
+				width="100%"
+				dropdownWidth="100%"
+			/>
+
+			{#if selectedValue}
+				<p style="color: var(--text1); margin: 0;">
+					Selected: {selectedValue}
+				</p>
+			{/if}
+
+			<Button onclick={handleCloseModal} variant="secondary">Close Modal</Button>
+		</div>
+	</Modal>
+</div>

package/dist/ui/components/select/SelectInModalStory.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    initialOpen?: boolean;
+}
+declare const SelectInModalStory: import("svelte").Component<Props, {}, "">;
+type SelectInModalStory = ReturnType<typeof SelectInModalStory>;
+export default SelectInModalStory;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {