@react-md/autocomplete
Version:
Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.
479 lines (207 loc) • 14.5 kB
Markdown
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [5.1.6](https://github.com/mlaursen/react-md/compare/v5.1.5...v5.1.6) (2023-12-11)
### Bug Fixes
* **select:** port fixed positioning fixes back from v6.0.0 ([feb9ec6](https://github.com/mlaursen/react-md/commit/feb9ec6c32c22665851d6e470aa38637b0d3b32e)), closes [#1461](https://github.com/mlaursen/react-md/issues/1461)
## [5.1.5](https://github.com/mlaursen/react-md/compare/v5.1.4...v5.1.5) (2023-05-09)
### Bug Fixes
* **@react-md/autocomplete:** Prevent event default when pressing enter with open `AutoComplete` ([#1439](https://github.com/mlaursen/react-md/issues/1439)) ([c505642](https://github.com/mlaursen/react-md/commit/c505642e7c41c8c42391b8373925609a98adc2e7))
## [5.1.4](https://github.com/mlaursen/react-md/compare/v5.1.3...v5.1.4) (2022-06-16)
**Note:** Version bump only for package @react-md/autocomplete
## [5.1.3](https://github.com/mlaursen/react-md/compare/v5.1.2...v5.1.3) (2022-05-07)
### Documentation
* fix typos throughout codebase ([725d1a2](https://github.com/mlaursen/react-md/commit/725d1a252482dba56088dffa2f773b2ea13fb08a))
### Other Internal Changes
* **@react-md/autocomplete:** fix typos in utils tests ([c0333cc](https://github.com/mlaursen/react-md/commit/c0333cc9e27009f7a15f7981c43f52f578a4d0b4))
* **typos:** fix additional typos throughout repo ([ef20132](https://github.com/mlaursen/react-md/commit/ef2013288ce8649b9fddba9bc23c71df72ea03a1))
## [5.1.2](https://github.com/mlaursen/react-md/compare/v5.1.1...v5.1.2) (2022-04-02)
**Note:** Version bump only for package @react-md/autocomplete
## [5.1.1](https://github.com/mlaursen/react-md/compare/v5.1.0...v5.1.1) (2022-04-01)
**Note:** Version bump only for package @react-md/autocomplete
# [5.1.0](https://github.com/mlaursen/react-md/compare/v5.0.0...v5.1.0) (2022-03-18)
### Other Internal Changes
* run lint-scripts --fix for consistent-type-imports ([42d839d](https://github.com/mlaursen/react-md/commit/42d839d359922e0a8ee3775a75162b9755a2c2b6))
# [5.0.0](https://github.com/mlaursen/react-md/compare/v4.0.3...v5.0.0) (2022-01-31)
**Note:** Version bump only for package @react-md/autocomplete
## [4.0.3](https://github.com/mlaursen/react-md/compare/v4.0.2...v4.0.3) (2021-12-31)
### Other Internal Changes
* Updated all packages' peerDependenciesMeta ([60fcd71](https://github.com/mlaursen/react-md/commit/60fcd719ac785c2f0b9d27cda82baa3c773c0e5a)), closes [#1319](https://github.com/mlaursen/react-md/issues/1319)
## [4.0.2](https://github.com/mlaursen/react-md/compare/v4.0.1...v4.0.2) (2021-11-30)
**Note:** Version bump only for package @react-md/autocomplete
## [4.0.1](https://github.com/mlaursen/react-md/compare/v4.0.0...v4.0.1) (2021-11-27)
### Other Internal Changes
* Updated imports to use `import type` when possible ([ba96bb6](https://github.com/mlaursen/react-md/commit/ba96bb62eeddcc0879f6d584aa670850203561e6))
# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)
### Features
* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))
* **@react-md/transition:** No longer use findDOMNode for transitions ([cb952da](https://github.com/mlaursen/react-md/commit/cb952da5b0cd0a67b9650e45d1e29896d66f01e1))
### Other Internal Changes
* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
### Breaking Changes
* Minimum React version is now 16.14 instead of 16.8
* **react-md:** There will no longer be run-time prop validation with
the `prop-types` package.
# [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
### Bug Fixes
* **typescript:** updated all array types to be readonly ([8f71bcb](https://github.com/mlaursen/react-md/commit/8f71bcbde12928434975c6836079c3dda7c6ab1f))
### Other Internal Changes
* ran `yarn format` to include new files ([48d3d7f](https://github.com/mlaursen/react-md/commit/48d3d7fddb0435edf7dec9d0ba38cf3f0f251709))
## [3.0.1](https://github.com/mlaursen/react-md/compare/v3.0.0...v3.0.1) (2021-08-15)
### Bug Fixes
* Updated peerDependencies to fix yarn berry peer requirements ([250efcd](https://github.com/mlaursen/react-md/commit/250efcdd81ea39c06b08eb30109589c89d9b8e0f)), closes [#1224](https://github.com/mlaursen/react-md/issues/1224)
# [3.0.0](https://github.com/mlaursen/react-md/compare/v2.9.1...v3.0.0) (2021-08-13)
**Note:** Version bump only for package @react-md/autocomplete
## [2.9.1](https://github.com/mlaursen/react-md/compare/v2.9.0...v2.9.1) (2021-07-27)
### Other Internal Changes
* **install:** slighly reduce install size by excluding tests in publish ([9d01a44](https://github.com/mlaursen/react-md/commit/9d01a44b81b619d6ac1c4d458005c99838fc6894))
# [2.9.0](https://github.com/mlaursen/react-md/compare/v2.8.5...v2.9.0) (2021-07-18)
**Note:** Version bump only for package @react-md/autocomplete
## [2.8.5](https://github.com/mlaursen/react-md/compare/v2.8.4...v2.8.5) (2021-07-03)
**Note:** Version bump only for package @react-md/autocomplete
## [2.8.4](https://github.com/mlaursen/react-md/compare/v2.8.3...v2.8.4) (2021-06-10)
### Other Internal Changes
* ran `prettier` after upgrading to v2.3.0 ([3ce236a](https://github.com/mlaursen/react-md/commit/3ce236a6008ff3d57f16cf3f6ab8e85fcce1dd4d))
## [2.8.3](https://github.com/mlaursen/react-md/compare/v2.8.2...v2.8.3) (2021-05-18)
### Documentation
* **react-md.dev:** updated tsdoc to work with `typedoc` ([cf54c35](https://github.com/mlaursen/react-md/commit/cf54c359268332245d1dad8a8d91e0476cd8cb33))
## [2.8.2](https://github.com/mlaursen/react-md/compare/v2.8.1...v2.8.2) (2021-04-23)
**Note:** Version bump only for package @react-md/autocomplete
## [2.8.1](https://github.com/mlaursen/react-md/compare/v2.8.0...v2.8.1) (2021-04-23)
**Note:** Version bump only for package @react-md/autocomplete
# [2.8.0](https://github.com/mlaursen/react-md/compare/v2.7.1...v2.8.0) (2021-04-22)
### Other Internal Changes
* **tsconfig:** separate tsconfig by package instead of a single root ([b278230](https://github.com/mlaursen/react-md/commit/b2782303b2a2db07eeaa25b6a3d04337976cffaa))
## [2.7.1](https://github.com/mlaursen/react-md/compare/v2.7.0...v2.7.1) (2021-03-23)
### Other Internal Changes
* **ts:** stopped using FC type ([c5daa47](https://github.com/mlaursen/react-md/commit/c5daa47d73516e075c036fd745e7228d7f155a62))
# [2.7.0](https://github.com/mlaursen/react-md/compare/v2.6.0...v2.7.0) (2021-02-28)
### Documentation
* **tsdoc:** fixed some tsdoc annotations and styling ([0449b86](https://github.com/mlaursen/react-md/commit/0449b86e4e51793710b35a452b7ebcbb6e7b5b2e))
* **tsdoc:** updated \@since annotations ([c62027e](https://github.com/mlaursen/react-md/commit/c62027ebf2223167a2fde0378882e4b934d61971))
### Other Internal Changes
* updated test coverage to not include conditional component PropTypes ([24e5df1](https://github.com/mlaursen/react-md/commit/24e5df14c731411d7691253383435036326407b5))
# [2.6.0](https://github.com/mlaursen/react-md/compare/v2.5.5...v2.6.0) (2021-02-13)
**Note:** Version bump only for package @react-md/autocomplete
## [2.5.5](https://github.com/mlaursen/react-md/compare/v2.5.4...v2.5.5) (2021-01-30)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.5.4](https://github.com/mlaursen/react-md/compare/v2.5.3...v2.5.4) (2021-01-27)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.5.3](https://github.com/mlaursen/react-md/compare/v2.5.2...v2.5.3) (2021-01-12)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.5.2](https://github.com/mlaursen/react-md/compare/v2.5.1...v2.5.2) (2021-01-12)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.5.1](https://github.com/mlaursen/react-md/compare/v2.5.0...v2.5.1) (2020-12-16)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
# [2.5.0](https://github.com/mlaursen/react-md/compare/v2.4.3...v2.5.0) (2020-12-15)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.4.3](https://github.com/mlaursen/react-md/compare/v2.4.2...v2.4.3) (2020-11-14)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.4.2](https://github.com/mlaursen/react-md/compare/v2.4.1...v2.4.2) (2020-10-23)
**Note:** Version bump only for package
## [2.4.1](https://github.com/mlaursen/react-md/compare/v2.4.0...v2.4.1) (2020-10-17)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
# [2.4.0](https://github.com/mlaursen/react-md/compare/v2.3.1...v2.4.0) (2020-10-17)
### Features
- [@react-md/theme](../theme): Better Contrast Colors by Default and dev-utils
refactor ([#955](https://github.com/mlaursen/react-md/issues/955))
([519b128](https://github.com/mlaursen/react-md/commit/519b128522de944d55ff96a1e1125447665ed586))
## [2.3.1](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.1) (2020-09-15)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
# [2.3.0](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.0) (2020-09-10)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.2.2](https://github.com/mlaursen/react-md/compare/v2.2.1...v2.2.2) (2020-09-02)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.2.1](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.2.1) (2020-09-02)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.1.1](https://github.com/mlaursen/react-md/compare/v2.1.0...v2.1.1) (2020-07-21)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
# [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)
### Features
- Exported the `useAutoComplete` hook
([cac5cd1](https://github.com/mlaursen/react-md/commit/cac5cd16a1452130ba600833c8ad1180d7ec4918))
- Render non-searchable items in `AutoComplete`
([e7a82ac](https://github.com/mlaursen/react-md/commit/e7a82acf874f46b56e8427cdb389ff1f18f12927))
## [2.0.3](https://github.com/mlaursen/react-md/compare/v2.0.2...v2.0.3) (2020-07-07)
**Note:** Version bump only for package
[@react-md/autocomplete](../autocomplete)
## [2.0.2](https://github.com/mlaursen/react-md/compare/v2.0.1...v2.0.2) (2020-06-30)
### Bug Fixes
- **LICENSE:** Removed the time range from license since it was incorrect
([50c9021](https://github.com/mlaursen/react-md/commit/50c9021cedc0d642758b9fd541bb6c93d2fe1786))
- Added `sideEffects` field to `package.json`
([31820b9](https://github.com/mlaursen/react-md/commit/31820b9b43705e5849664500a17b6849eb6dc2a9))
- `sideEffects` formatting
([78a7b6b](https://github.com/mlaursen/react-md/commit/78a7b6b0e40c7daefb749835670705f21bd21720))
## v2.0.1
No changes.
## v2.0.0
The v2 release completely re-write the `Autocomplete` component and renamed it
to `AutoComplete`. There is a new API for dealing with data as well as a lot of
accessibility fixes.
### New Behavior and Features
- correctly forwards the ref to the `<input />` element
- inherits all the new text field styles
- inherits all the new `Option`/`ListItem` styles
- lots of accessibility fixes since it now respects to the
[combobox role](https://www.w3.org/TR/wai-aria-practices/#combobox)
- opinionated better focus styles to help show keyboard focus vs "real" focus
- the `"inline"` autocomplete is no longer a clickable `<span>` and instead is
done with `input.setSelectionRange`
- supports both `"inline"` and `"menu"` autocomplete behavior instead of being
separate
- supports limited highlighting of text within the search results
- defaults to showing the list of suggestions once focused instead of after
typing a letter
- added additional filter options to the filter function
- added a flag to be able to filter the data when there is no `value` for custom
display items
- added `getResultId`, `getResultLabel` and `getResultValue` to customizing the
displayed matches a bit nicer (this is also have the `data` is filtered)
### Breaking Changes
Everything is honestly a breaking change, but here's a few that are important to
mention:
- no longer has any styles of its own
- only supports "smart" menus (automatically render itself within the viewport)
- the `value` is no longer controllable (will be added in a later release)
- no longer supports adding `aria-setsize` and `aria-posinset` for each option
automatically when paginating results (will be added in a later release)
- no longer supports rendering items that are not searchable and focusable (will
be added in a later release)
- the visibility of the autocomplete list is no longer controllable
- renamed `dataLabel` to `labelKey`
- renamed `dataValue` to `valueKey`
- renamed the `deleteKeys` to `omitKeys`
- all the positioning options were renamed
#### Removed SCSS Variables Placeholders, and Mixins
- removed `$md-inline-autocomplete`
- removed `$md-autocomplete-suggestion-top`
- removed `$md-autocomplete-suggestion-mobile-floating-top`
- removed `$md-autocomplete-suggestion-mobile-block-top`
- removed `$md-autocomplete-suggestion-desktop-floating-top`
- removed `$md-autocomplete-suggestion-desktop-block-top`
- removed `@mixin react-md-autocompletes`
- removed `@mixin react-md-theme-autocompletes`
- removed `@mixin react-md-autocompletes-mobile`
- removed `@mixin react-md-autocompletes-desktop`
- removed `@mixin react-md-autocompletes-media`