fix(frontend): revert CloseButton refactor that broke tag removal in MultiSelect (#7909)

The recent refactor of CloseButton (from on:close component events to onClick prop) broke tag removal in MultiSelect/TagsToListenTo. The refactor changed on:pointerdown (component event) to onPointerdown (native DOM event), which stopped native pointerdown propagation and broke the drag tracking in DraggableTags, causing the dropdown to open on every close button click. Reverts CloseButton and all callers back to using createEventDispatcher and on:close. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-09-05 00:03:08 +00:00 · 2026-02-11 15:27:50 +01:00
parent ea52a8b8ce
commit b11d6ed794
18 changed files with 27 additions and 24 deletions
@@ -372,7 +372,7 @@
 								label: 'Reset to all tags minus native ones',
 								onClick: () => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = defaultTags.concat(nativeTags)
+										nconfig.worker_tags = defaultTags
 									}
 								},
 								disabled: !canEditConfig,
@@ -157,7 +157,7 @@
 					>
 						<div class="leading-6 font-semibold text-sm w-full flex justify-between">
 							<div>Migrate to CSS editor</div><CloseButton
-								onClick={() => (migrationModalOpen = false)}
+								on:close={() => (migrationModalOpen = false)}
 							/>
 						</div>

@@ -164,7 +164,7 @@
 								<CloseButton
 									noBg
 									small
-									onClick={() => {
+									on:close={() => {
 										items = items.filter((_, i) => i !== index)
 									}}
 								/>
@@ -205,7 +205,7 @@
 							bind:value={items[index].value}
 						/>
 						<div class="absolute right-8">
-							<CloseButton noBg small onClick={() => deleteSubgrid(index)} />
+							<CloseButton noBg small on:close={() => deleteSubgrid(index)} />
 						</div>

 						<div class="flex flex-col justify-center gap-2">
@@ -104,7 +104,7 @@
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">
-						<CloseButton noBg onClick={() => dispatch('delete', k)} />
+						<CloseButton noBg on:close={() => dispatch('delete', k)} />
 					</div>
 				{/if}
 			{/if}
@@ -195,7 +195,7 @@
 							<div class="flex flex-row items-center gap-1">
 								<CloseButton
 									small
-									onClick={() => deleteComponent(component.id, item.originalIndex)}
+									on:close={() => deleteComponent(component.id, item.originalIndex)}
 								/>
 							</div>
 						</div>
@@ -29,7 +29,7 @@
 			<div
 				class="flex justify-between {right ? '' : 'flex-row-reverse'} items-center gap-1 px-3 py-2"
 			>
-				<CloseButton onClick={() => secondaryMenu?.close()} />
+				<CloseButton on:close={() => secondaryMenu?.close()} />
 				{#if $secondaryMenu?.props?.type === 'style'}
 					<div class="flex flex-row items-center gap-1">
 						<div class="text-xs font-bold"> Style Panel</div>
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte'
 	import Button from './button/Button.svelte'
 	import { X } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -9,15 +10,17 @@
 		Icon?: any | undefined
 		class?: string
 		id?: string | undefined
-		onClick?: (e: Event) => void
+		onClick?: () => void | undefined | any
 	}

 	let { noBg = false, small = false, Icon, class: className, id, onClick }: Props = $props()
+
+	const dispatch = createEventDispatcher()
 </script>

 <Button
-	{onClick}
-	onPointerdown={(e) => e.stopPropagation()}
+	on:click={() => (dispatch('close'), onClick?.())}
+	on:pointerdown={(e) => e.stopPropagation()}
 	{id}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
@@ -91,7 +91,7 @@
 		dropdownBtnClasses?: string
 		dropdownItems?: MenuItem[] | (() => MenuItem[]) | undefined
 		hideDropdown?: boolean
-		onClick?: (e: Event) => void
+		onClick?: (e?: Event) => void
 		children?: import('svelte').Snippet
 		tooltip?: import('svelte').Snippet
 		[key: string]: any
@@ -61,7 +61,7 @@
 					}
 				}}
 			>
-				<CloseButton onClick={() => dispatch('close')} Icon={CloseIcon} id="{id}-close-btn" />
+				<CloseButton on:close Icon={CloseIcon} id="{id}-close-btn" />
 			</div>
 			<span class="font-semibold text-emphasis truncate text-lg max-w-sm"
 				>{title ?? ''}
@@ -90,7 +90,7 @@
 					{style}
 				>
 					{#if kind == 'X'}
-						<div class="absolute top-4 right-4"><CloseButton onClick={() => (open = false)} /></div
+						<div class="absolute top-4 right-4"><CloseButton on:close={() => (open = false)} /></div
 						>
 					{/if}
 					<div class="flex">
@@ -142,7 +142,7 @@
 					onblur={handleBlur}
 				/>
 				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
-					><span class="invisible">days</span><span>{day !== 1 ? 'days' : 'day'}</span></span
+					><span class="invisible">days</span><span>{day && day > 1 ? 'days' : 'day'}</span></span
 				>
 			</div>
 			<div class="flex items-baseline">
@@ -166,7 +166,7 @@
 					onblur={handleBlur}
 				/>
 				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
-					><span class="invisible">hrs</span><span>{hour !== 1 ? 'hrs' : 'hr'}</span></span
+					><span class="invisible">hrs</span><span>{hour && hour > 1 ? 'hrs' : 'hr'}</span></span
 				>
 			</div>
 			<div class="flex items-baseline">
@@ -190,7 +190,7 @@
 					onblur={handleBlur}
 				/>
 				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
-					><span class="invisible">mins</span><span>{min !== 1 ? 'mins' : 'min'}</span></span
+					><span class="invisible">mins</span><span>{min && min > 1 ? 'mins' : 'min'}</span></span
 				>
 			</div>
 			<div class="flex items-baseline">
@@ -214,7 +214,7 @@
 					onblur={handleBlur}
 				/>
 				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
-					><span class="invisible">secs</span><span>{sec !== 1 ? 'secs' : 'sec'}</span></span
+					><span class="invisible">secs</span><span>{sec && sec > 1 ? 'secs' : 'sec'}</span></span
 				>
 			</div>
 		</div>
@@ -223,7 +223,7 @@
 				class="bg-transparent text-secondary hover:text-primary"
 				noBg
 				small
-				onClick={() => {
+				on:close={() => {
 					seconds = defaultValue
 				}}
 			/>
@@ -56,7 +56,7 @@
 			<CloseButton
 				class="text-hint bg-transparent border-none"
 				small
-				onClick={(e) => { e.stopPropagation(); onRemove(item) }}
+				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>
 		{/if}
 	</li>
@@ -158,7 +158,7 @@
 			noBg
 			class="ml-2 remove-all bg-transparent text-hint"
 			small
-			onClick={(e) => { e.stopPropagation(); clearValue() }}
+			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>
 	{/if}
 	<SelectDropdown
@@ -147,7 +147,7 @@
 				class="bg-transparent text-secondary hover:text-primary"
 				noBg
 				small
-				onClick={clearValue}
+				on:close={clearValue}
 			/>
 		</div>
 	{:else if RightIcon}
@@ -280,7 +280,7 @@
 					{/if}
 				</Cell>
 				<Cell class="w-12">
-					<CloseButton small onClick={() => removeDataTable(dataTableIndex)} />
+					<CloseButton small on:close={() => removeDataTable(dataTableIndex)} />
 				</Cell>
 			</Row>
 		{/each}
@@ -378,7 +378,7 @@
 					</div>
 				</Cell>
 				<Cell class="w-12">
-					<CloseButton small onClick={() => removeDucklake(ducklakeIndex)} />
+					<CloseButton small on:close={() => removeDucklake(ducklakeIndex)} />
 				</Cell>
 			</Row>
 		{/each}
@@ -227,7 +227,7 @@
 						{#if tableRow[0] !== null}
 							<CloseButton
 								small
-								onClick={() => {
+								on:close={() => {
 									if (s3ResourceSettings.secondaryStorage) {
 										s3ResourceSettings.secondaryStorage.splice(idx - 1, 1)
 										s3ResourceSettings.secondaryStorage = [...s3ResourceSettings.secondaryStorage]