svelte-typeahead

Fixes

• replace aria-owns with aria-controls to resolve a11y-role-has-required-aria-props warning (99bfa7b, #73)

Features

• add showAllResultsOnFocus prop to display all results when focusing an empty input (3fc92ef, #65)

Fixes

• silence a11y warnings emitted by [email protected] (b599654, #71)
• event type for dispatched clear event should be null (a080a5a, #69)
• unset ul margin (b49b1e0, #68)

Fixes

• allow results to be selected if using showDropdownOnFocus (90880ce, #61)

Fixes

• skip disabled results when auto-selecting a result (9e87768, #57)

Features

• add showDropdownOnFocus prop to only show dropdown if the search input is focused (7aeb4d4, #55)

Fixes

• set dropdown menu z-index: 1 when expanded (8fee120, #49)

Fixes

• update selected index when hovering over a result (06a5415, #48)

Fixes

• pressing "ArrowUp" on last item should not reset highlighted index (6d63028, #42 contributed by @elimisteve)

Fixes

• prevent keyboard selection and navigation of disabled results
• add missing annotation for TItem.disabled to results prop

Documentation

• add pnpm installation command
• remove "disabling items after selection" example
• remove id fields from data array
• simplify dispatched events example

Features

• use TypeScript generics so that the item type can be inferred from data value

<script lang="ts">
  import Typeahead from "svelte-typeahead";

  const data = [
    { id: 1, state: "North Carolina" },
    { id: 2, state: "North Dakota" },
    { id: 3, state: "South Carolina" },
    { id: 4, state: "South Dakota" },
  ];
</script>

<Typeahead
  {data}
  extract={(item) => {
    return item.state; // type "string" is inferred
  }}
/>

Features

• render a "no-results" slot when the search value does not yield results
• add value to the default slot props

Breaking Changes

• use .svelte.d.ts for the component TypeScript definition extension

Breaking Changes

• the ul element is rendered even without results to preserve the accessibility label

Fixes

• disable form ARIA attributes in svelte-search
• pass the correct aria-activedescendant item to svelte-search

Contributed by @Skovvart in #20

Fixes

• pass id to Search to fix aria-labelledby references (contributed by @Skovvart in #19 )

Features

• add limit prop to limit number of results; default value is Infinity

  <Typeahead limit={2} {data} {extract} />
  

Features

• add disable, filter props to disable and filter items from the result set (contributed by @Amerlander)

Fixes

• bind the input element reference correctly to fix focusing behavior
• don't pass the Typeahead id to Search

Features

• add inputAfterSelect prop to allow user to preserve or clear the input field after selecting a result; possible values are "update" | "clear" | "keep" (default is "update")

• add searched value to dispatched "select" event detail (e.detail.searched)

  <Typeahead
    inputAfterSelect="clear"
    on:select="{(e) => {
      console.log(e.detail.searched);
    }}"
  />
  

Features

• include original item and originalIndex in dispatched "select" event

  <Typeahead
    on:select="{(e) => {
      console.log(e.detail.original);
      console.log(e.detail.originalIndex);
    }}"
  />
  

Breaking Changes

• upgrade svelte-search to version 1.0.0
• defer to default label, placeholder props from search-svelte
• use SvelteComponentTyped interface in TypeScript definitions

Features

• export reactive results array containing fuzzy results
• add focusAfterSelect to opt in to focusing input after selecting a result
• keydown default behavior is preventing if pressing "ArrowUp", "ArrowDown", or "Escape"

Breaking changes

• focusAfterSelect is false by default
• redesigned default styles
• if using TS, Svelte version >=3.30 is required