search

mroderick / plete

Vanilla autocomplete component
https://plete.dev
BSD 3-Clause "New" or "Revised" License
35 stars 4 forks source link

Add support for cancelling #22

Closed mroderick closed 4 years ago

mroderick commented 4 years ago

This PR fixes #5

Background

When filtering using remote services, it can be beneficial to cancel requests, especially when the network is unstable and responses appear out of order.

Aborting old requests, mean that only the last request will be used.

Solution

With the changes in the PR, the dataSrc functions can return an object with promise and abort properties, in addition to the existing promise.

The abort function will be called before the next call to the dataSrc function.

Abandoned solution: We tried implementing this using an array returned from dataSrc. However, that makes it difficult to differentiate between the situations, where we want to use an abort function, and when the dataSrc returns an array of results. Using an object with named properties, makes it easy to detect the abort scenario.

An example with aborting has been added to the index.html file, which is for development purposes.

Once this PR is merged, we can cut a new minor version, and update the documentation site.

How to verify

  1. Check out this branch
  2. npm ci
  3. npm start
  4. Navigate to http://localhost:8080
  5. In the "Cancel remote requests" example type several values (note that the input is debounced to 120ms, so fast typing will only generate one request)
  6. Observe that Previous request aborted is logged to the console when requests are aborted
mroderick commented 4 years ago

Codecov Report

Merging #22 into master will not change coverage. The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff          @@
##           master    #22   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          23     23           
  Lines         207    207           
=====================================
  Hits          207    207
Flag Coverage Δ
#unit 100% <ø> (ø) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update f75ea5a...a9f94f9. Read the comment docs.

mroderick commented 4 years ago

Documentation notes:

We could point people towards using polyfill.io, or recommend they run their own version of it: https://kentcdodds.com/blog/polyfill-as-needed-with-polyfill-service

mroderick commented 4 years ago

Would like to discuss the datasrc-as-function.test.js on Friday.

Let's do that! We can write some more tests for it!

mroderick commented 4 years ago

This has been published as plete@0.3.0