Skip to content

Commit

Permalink
Use an event and dispatch it instead of adding event handlers the oth…
Browse files Browse the repository at this point in the history
…er way. (#2440)
  • Loading branch information
GiantRobots authored Nov 22, 2024
1 parent 76f0122 commit e5235bf
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 12 deletions.
10 changes: 5 additions & 5 deletions src/lib/holocene/combobox/async-test.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
export let id = '';
function keypress(stuff) {
function input(stuff: CustomEvent) {
loading = true;
value = stuff.target.value;
value = stuff.detail;
console.log(value);
options = syncOptions;
// This makes sure the worst case always happens the newest value comes first
Expand All @@ -41,7 +41,7 @@
// console.log("it's old!", { value });
}
},
2000 + i * 100,
2000 + i * 25,
value,
);
}
Expand All @@ -50,7 +50,7 @@
<Combobox
bind:value
{options}
{keypress}
on:input={input}
on:change={(newVal) => {
console.log('change', newVal);
}}
Expand Down
9 changes: 2 additions & 7 deletions src/lib/holocene/combobox/combobox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
change: { value: string | T };
filter: string;
close: { selectedOption: string | T };
input: string;
}>();
type ExtendedInputEvent = Event & {
Expand All @@ -48,11 +49,6 @@
actionTooltip?: string;
href?: string;
hrefDisabled?: boolean;
/**
* Use Keypress to receive the event after the combobox has done it's updating for async operations
* @param event
*/
keypress?: (event: KeyboardEvent) => void;
loading?: boolean;
loadingText?: string;
}
Expand Down Expand Up @@ -99,7 +95,6 @@
export let label: string;
export let multiselect = false;
export let value: string | string[] = multiselect ? [] : undefined;
export let keypress: BaseProps['keypress'] = () => {};
export let noResultsText: string;
export let disabled = false;
export let labelHidden = false;
Expand Down Expand Up @@ -331,6 +326,7 @@
// Reactive statement at top makes this work, not my favorite tho
displayValue = event.currentTarget.value;
filterValue = displayValue;
dispatch('input', displayValue);
};
function filterOptions(value: string, options: (T | string)[]) {
Expand Down Expand Up @@ -418,7 +414,6 @@
on:focus|stopPropagation={openList}
on:input|stopPropagation={handleInput}
on:keydown|stopPropagation={handleInputKeydown}
on:keyup={keypress}
on:click|stopPropagation={handleInputClick}
data-testid={$$props['data-testid'] ?? id}
bind:this={inputElement}
Expand Down

0 comments on commit e5235bf

Please sign in to comment.