Merge pull request #9478 from gitbutlerapp/fix-clickoutside-handling-spacing

fix(web/ui): improve clickOutside handling and fix spacing in chat

Author: estib-vega

apps/web/src/lib/components/chat/MessageText.svelte

@@ -12,6 +12,7 @@
 
 	const userMap = $derived(new Map(mentions.map((user) => [user.id, user])));
 	const words = $derived(getChatMessageWords(text, userMap));
+	const SPACE = ' ';
 </script>
 
 <span>
@@ -21,6 +22,6 @@
 		{:else}
 			<Mention mention={word.mention} />
 		{/if}
-		&nbsp;
+		{SPACE}
 	{/each}
 </span>

packages/ui/src/lib/HunkDiff.svelte

@@ -15,6 +15,7 @@
 		type LineSelector,
 		parseHunk
 	} from '$lib/utils/diffParsing';
+	import { isDefined } from '$lib/utils/typeguards';
 	import type { ContextMenuParams } from '$lib/hunkDiff/HunkDiffRow.svelte';
 	import type { Snippet } from 'svelte';
 	interface Props {
@@ -69,8 +70,6 @@
 
 	const BORDER_WIDTH = 1;
 
-	let tableWidth = $state<number>(0);
-	let tableHeight = $state<number>(0);
 	let numberHeaderWidth = $state<number>(0);
 
 	const hunk = $derived(parseHunk(hunkStr));
@@ -85,11 +84,11 @@
 	const showingCheckboxes = $derived(!hideCheckboxes && staged !== undefined);
 	const hunkHasLocks = $derived(lineLocks && lineLocks.length > 0);
 	const colspan = $derived(showingCheckboxes || hunkHasLocks ? 3 : 2);
+	let tableWrapperElem = $state<HTMLElement>();
 </script>
 
 <div
-	bind:clientWidth={tableWidth}
-	bind:clientHeight={tableHeight}
+	bind:this={tableWrapperElem}
 	class="table__wrapper hide-native-scrollbar contrast-{diffContrast}"
 	style="--tab-size: {tabSize}; --diff-font: {diffFont};"
 	style:font-variant-ligatures={diffLigatures ? 'common-ligatures' : 'none'}
@@ -134,28 +133,38 @@
 				</tr>
 			</thead>
 
-			<HunkDiffBody
-				comment={hunk.comment}
-				{filePath}
-				content={hunk.contentSections}
-				{onLineClick}
-				clearLineSelection={() => clearLineSelection?.(filePath)}
-				{wrapText}
-				{tabSize}
-				{diffFont}
-				{inlineUnifiedDiffs}
-				{selectedLines}
-				{lineLocks}
-				{numberHeaderWidth}
-				onCopySelection={onCopySelection && handleCopySelection}
-				{onQuoteSelection}
-				{staged}
-				{stagedLines}
-				{hideCheckboxes}
-				{handleLineContextMenu}
-				{clickOutsideExcludeElement}
-				{lockWarning}
-			/>
+			{#if tableWrapperElem}
+				<!-- We need to await the table wrapper to be mounted in order to set the array of elements
+			 to ignore when clicking outside.
+			 This is the case because the clickOutside handler needs to know which elements to ignore
+			 at mount time. Reactive updates to the array will not work as expected. -->
+				{@const elemetsToIgnoreInClickOutside = [
+					clickOutsideExcludeElement,
+					tableWrapperElem
+				].filter(isDefined)}
+				<HunkDiffBody
+					comment={hunk.comment}
+					{filePath}
+					content={hunk.contentSections}
+					{onLineClick}
+					clearLineSelection={() => clearLineSelection?.(filePath)}
+					{wrapText}
+					{tabSize}
+					{diffFont}
+					{inlineUnifiedDiffs}
+					{selectedLines}
+					{lineLocks}
+					{numberHeaderWidth}
+					onCopySelection={onCopySelection && handleCopySelection}
+					{onQuoteSelection}
+					{staged}
+					{stagedLines}
+					{hideCheckboxes}
+					{handleLineContextMenu}
+					clickOutsideExcludeElements={elemetsToIgnoreInClickOutside}
+					{lockWarning}
+				/>
+			{/if}
 		</table>
 	</ScrollableContainer>
 </div>

packages/ui/src/lib/hunkDiff/HunkDiffBody.svelte

@@ -36,7 +36,7 @@
 		stagedLines?: LineId[];
 		hideCheckboxes?: boolean;
 		handleLineContextMenu?: (params: ContextMenuParams) => void;
-		clickOutsideExcludeElement?: HTMLElement;
+		clickOutsideExcludeElements?: HTMLElement[];
 		comment?: string;
 		lockWarning?: Snippet<[DependencyLock[]]>;
 	}
@@ -60,7 +60,7 @@
 		stagedLines,
 		hideCheckboxes,
 		handleLineContextMenu,
-		clickOutsideExcludeElement,
+		clickOutsideExcludeElements,
 		lockWarning
 	}: Props = $props();
 
@@ -240,7 +240,7 @@
 		bind:clientHeight={chunkHeight[chunkIdx]}
 		use:clickOutside={{
 			handler: handleClearSelection,
-			excludeElement: clickOutsideExcludeElement
+			excludeElement: clickOutsideExcludeElements
 		}}
 		use:intersectionObserver={{
 			callback: (entries) => {

packages/ui/src/lib/utils/clickOutside.ts

@@ -1,11 +1,25 @@
-export type ClickOpts = { excludeElement?: Element; handler: (event: MouseEvent) => void };
+export type ClickOpts = {
+	excludeElement?: Element | Element[];
+	handler: (event: MouseEvent) => void;
+};
+
+function elementShouldBeExcluded(
+	element: Element | Element[] | undefined,
+	target: HTMLElement
+): boolean {
+	if (!element) return false;
+	if (Array.isArray(element)) {
+		return element.some((el) => el.contains(target));
+	}
+	return element.contains(target);
+}
 
 export function clickOutside(node: HTMLElement, params: ClickOpts) {
 	function onClick(event: MouseEvent) {
 		if (
 			node &&
 			!node.contains(event.target as HTMLElement) &&
-			!params.excludeElement?.contains(event.target as HTMLElement)
+			!elementShouldBeExcluded(params.excludeElement, event.target as HTMLElement)
 		) {
 			params.handler(event);
 		}