Skip to content

Commit

Permalink
update key
Browse files Browse the repository at this point in the history
  • Loading branch information
huntabyte committed Jul 19, 2024
1 parent 311552d commit 9683000
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 11 deletions.
17 changes: 9 additions & 8 deletions packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { createContext } from "$lib/internal/createContext.js";
import { kbd } from "$lib/internal/kbd.js";
import type { WithRefProps } from "$lib/internal/types.js";
import { useRefById } from "$lib/internal/useRefById.svelte.js";
import { onDestroy, tick } from "svelte";
import { onDestroy, tick, untrack } from "svelte";

// prettier-ignore
export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
Expand Down Expand Up @@ -77,7 +77,7 @@ class ComboboxBaseRootState {

$effect(() => {
if (!this.open.value) {
this.highlightedNode = null;
untrack(() => (this.highlightedNode = null));
}
});
}
Expand All @@ -96,10 +96,12 @@ class ComboboxBaseRootState {
};

setHighlightedToFirstCandidate = () => {
console.log("setting to first candidate");
afterTick(() => {
this.setHighlightedNode(null);
const candidateNodes = this.getCandidateNodes();
if (!candidateNodes.length) return;
this.highlightedNode = candidateNodes[0]!;
this.setHighlightedNode(candidateNodes[0]!);
});
};

Expand Down Expand Up @@ -146,9 +148,7 @@ class ComboboxSingleRootState extends ComboboxBaseRootState {

$effect(() => {
if (!this.open.value) return;
afterTick(() => {
this.#setInitialHighlightedNode();
});
this.#setInitialHighlightedNode();
});
}

Expand Down Expand Up @@ -312,7 +312,6 @@ class ComboboxInputState {
this.root.openMenu();

if (this.root.hasValue) return;
await tick();

const candidateNodes = this.root.getCandidateNodes();
if (!candidateNodes.length) return;
Expand Down Expand Up @@ -543,7 +542,9 @@ class ComboboxItemState {
};

#onpointermove = (_: PointerEvent) => {
this.root.setHighlightedNode(this.#ref.value);
if (this.root.highlightedNode !== this.#ref.value) {
this.root.setHighlightedNode(this.#ref.value);
}
};

#onpointerleave = (_: PointerEvent) => {
Expand Down
6 changes: 3 additions & 3 deletions sites/docs/src/lib/components/demos/combobox-demo.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</script>

<Combobox.Root
type="multiple"
type="single"
name="favoriteFruit"
onOpenChange={(o) => {
if (!o) inputValue = "";
Expand All @@ -47,9 +47,9 @@
class="w-[var(--bits-combobox-trigger-width)] min-w-[var(--bits-combobox-trigger-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
sideOffset={10}
>
{#each filteredFruits as fruit (fruit.value)}
{#each filteredFruits as fruit, i (i + fruit.value)}
<Combobox.Item
class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-muted"
class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
value={fruit.value}
label={fruit.label}
>
Expand Down

0 comments on commit 9683000

Please sign in to comment.