Skip to content

Commit

Permalink
feat: add showDropdownOnFocus prop (#55)
Browse files Browse the repository at this point in the history 
#54
  • Loading branch information
@metonym
metonym committed Aug 29, 2022
1 parent d13d489 commit 7aeb4d4
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 14 deletions.
37 changes: 24 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,23 +139,34 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
<Typeahead focusAfterSelect {data} {extract} />
```

### Show dropdown on focus

By default, the dropdown will be shown if the `value` has results.

Set `showDropdownOnFocus` to `true` to only show the dropdown when the search input is focused.

```svelte
<Typeahead value="ca" showDropdownOnFocus {data} {extract} />
```

## API

### Props

| Prop name | Value | Description |
| :--------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| value | `string` (default: `""`) | Input search value |
| data | `TItem[]` (default: `[]`) | Items to search |
| extract | `(TItem) => any` | Target an item key if `data` is an object array |
| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
| inputAfterSelect | `"update" or "clear" or "keep"`(default: `"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
| Prop name | Value | Description |
| :----------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| value | `string` (default: `""`) | Input search value |
| data | `TItem[]` (default: `[]`) | Items to search |
| extract | `(TItem) => any` | Target an item key if `data` is an object array |
| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
| inputAfterSelect | `"update" or "clear" or "keep"`(default: `"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
| showDropdownOnFocus | `boolean` (default: `false`) | Set to `true` to only show results when the input is focused. |
| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |

### Dispatched events

Expand Down
15 changes: 14 additions & 1 deletion src/Typeahead.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
/** Set to `true` to re-focus the input after selecting a result */
export let focusAfterSelect = false;
/** Set to `true` to only show results when the input is focused */
export let showDropdownOnFocus = false;
/**
* Specify the maximum number of results to return
* @type {number}
Expand All @@ -50,6 +53,7 @@
let hideDropdown = false;
let selectedIndex = -1;
let prevResults = "";
let isFocused = false;
afterUpdate(() => {
if (prevResults !== resultsId && autoselect) {
Expand Down Expand Up @@ -123,6 +127,9 @@
.map((result) => ({ ...result, disabled: disable(result.original) }));
$: resultsId = results.map((result) => extract(result.original)).join("");
$: showResults = !hideDropdown && results.length > 0;
$: if (showDropdownOnFocus) {
showResults = showResults && isFocused;
}
</script>

<svelte:window
Expand Down Expand Up @@ -161,10 +168,16 @@
on:input
on:change
on:focus
on:focus={open}
on:focus={() => {
open();
isFocused = true;
}}
on:clear
on:clear={open}
on:blur
on:blur={() => {
isFocused = false;
}}
on:keydown
on:keydown={(e) => {
if (results.length === 0) return;
Expand Down
6 changes: 6 additions & 0 deletions types/Typeahead.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@ export interface TypeaheadProps<TItem> extends SearchProps {
*/
focusAfterSelect?: boolean;

/**
* Set to `true` to only show results when the input is focused
* @default false
*/
showDropdownOnFocus?: boolean;

/**
* Specify the maximum number of results to return
* @default Infinity
Expand Down

0 comments on commit 7aeb4d4

Please sign in to comment.