New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoComplete: error when using async data and mustMatch #338

Closed
c-frater opened this Issue Oct 11, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@c-frater
Copy link
Contributor

c-frater commented Oct 11, 2016

Context

When using the autocomplete with mustMatch set to true and data that returns asynchronously, attempting to 'enter' a value before the data has loaded throws an error and causes the dropdown to stay on the page.

This was identified in the TagInput as it has autocomplete functionality that uses mustMatch by default.

Expected Behavior

The dropdown should show Loading... until the must match lookup completes and should then perform the must-match check (which should also complete after the user has 'blurred' the input)

Actual Behavior

The input value is cleared and an error is thrown (array.filter is undefined), leaving the dropdown on the page. The dropdown is then never cleared from the page.

Possible Fix

The ideal solution would be to upgrade the autocomplete to use the AutocompleteFeed code that is being used by the AutocompletePicker as it would make all the autocomplete functionality within hexagon consistent.
This would first require adding tests to AutoComplete.

Steps to Reproduce

const items = (term, cb) => {
  setTimeout((() => cb([ 'bob', 'steve', 'dave' ])), 10000)
}

hx.select('body')
  .add(hx.autoComplete(items, {mustMatch: true}))

Using the above code:

  1. click in the autocomplete input
  2. enter some text (a is sufficient)
  3. before the data returns (i.e. whilst Loading... is shown) press enter

Your Environment

  • Hexagon Version: 1.7.0

Tested on Android and iPad and in Firefox/Safari - the issue is present across all browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment