more tag imporvements

huntabyte · Oct 1, 2024 · 25c8997 · 25c8997
1 parent bc36353
commit 25c8997
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag.svelte b/packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag.svelte
@@ -22,7 +22,10 @@
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(() => value),
+		value: box.with(
+			() => value,
+			(v) => (value = v)
+		),
 		index: box.with(() => index),
 	});
 

diff --git a/packages/bits-ui/src/lib/bits/tags-input/tags-input.svelte.ts b/packages/bits-ui/src/lib/bits/tags-input/tags-input.svelte.ts
@@ -98,6 +98,10 @@ class TagsInputRootState {
 		this.value.current = [];
 	};
 
+	recomputeTabIndex = () => {
+		this.listRovingFocusGroup?.recomputeActiveTabNode();
+	};
+
 	props = $derived.by(
 		() =>
 			({
@@ -179,8 +183,10 @@ class TagsInputListState {
 
 type TagsInputTagStateProps = WithRefProps &
 	ReadableBoxedValues<{
-		value: string;
 		index: number;
+	}> &
+	WritableBoxedValues<{
+		value: string;
 	}>;
 
 class TagsInputTagState {
@@ -218,6 +224,10 @@ class TagsInputTagState {
 		});
 	}
 
+	setValue = (value: string) => {
+		this.value.current = value;
+	};
+
 	startEditing = () => {
 		this.isEditing = true;
 		this.editInput?.focus();
@@ -231,6 +241,7 @@ class TagsInputTagState {
 
 	remove = () => {
 		this.root.removeValueByIndex(this.index.current);
+		this.root.recomputeTabIndex();
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
@@ -347,10 +358,20 @@ class TagsInputTagEditState {
 		return srOnlyStyles;
 	});
 
-	#onkeydown = (e: KeyboardEvent) => {
+	#onkeydown = (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
 		if (e.key === kbd.ESCAPE || e.key === kbd.TAB) {
 			e.preventDefault();
 			this.tag.stopEditing();
+		} else if (e.key === kbd.ENTER) {
+			e.preventDefault();
+			const value = e.currentTarget.value;
+			if (value === "") {
+				this.tag.stopEditing();
+				this.tag.remove();
+			} else {
+				this.tag.setValue(value);
+				this.tag.stopEditing();
+			}
 		}
 	};
 
@@ -375,7 +396,6 @@ class TagsInputTagRemoveState {
 	#id: TagsInputTagRemoveStateProps["id"];
 	#tag: TagsInputTagState;
 	root: TagsInputRootState;
-	#list: TagsInputListState;
 	#ariaLabelledBy = $derived.by(() => {
 		if (this.#tag.textNode && this.#tag.textNode.id) {
 			return `${this.#id.current} ${this.#tag.textNode.id}`;
@@ -388,7 +408,6 @@ class TagsInputTagRemoveState {
 		this.#id = props.id;
 		this.#tag = tag;
 		this.root = tag.root;
-		this.#list = tag.list;
 
 		useRefById({
 			id: this.#id,
@@ -400,8 +419,6 @@ class TagsInputTagRemoveState {
 		this.#tag.remove();
 	};
 
-	#onkeydown = (e: KeyboardEvent) => {};
-
 	props = $derived.by(
 		() =>
 			({
@@ -413,7 +430,6 @@ class TagsInputTagRemoveState {
 				"data-editing": this.#tag.isEditing ? "" : undefined,
 				tabindex: -1,
 				onclick: this.#onclick,
-				onkeydown: this.#onkeydown,
 			}) as const
 	);
 }

diff --git a/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts b/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts
@@ -45,8 +45,10 @@ export function useRovingFocus(props: UseRovingFocusProps) {
 	const currentTabStopId: WritableBox<string | null> = props.currentTabStopId
 		? props.currentTabStopId
 		: box<string | null>(null);
+	let recomputeTracker = $state(false);
 
 	const anyActive = $derived.by(() => {
+		recomputeTracker;
 		if (!currentTabStopId.current) return false;
 		return Boolean(document.getElementById(currentTabStopId.current));
 	});
@@ -156,6 +158,10 @@ export function useRovingFocus(props: UseRovingFocusProps) {
 		return -1;
 	}
 
+	function recomputeActiveTabNode() {
+		recomputeTracker = !recomputeTracker;
+	}
+
 	return {
 		setCurrentTabStopId(id: string) {
 			currentTabStopId.current = id;
@@ -166,5 +172,6 @@ export function useRovingFocus(props: UseRovingFocusProps) {
 		navigateBackward,
 		currentTabStopId,
 		focusLastCandidate,
+		recomputeActiveTabNode,
 	};
 }