Svelte Typeahead Versions Save

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
  }}
/>