refactor(components): Improve debounce usage in Autocomplete

jdeichert commented 2 months ago

Motivations

While investigating a report of Autocomplete behaving poorly within test suites, I sunk some time into understanding how it works today and found some problems with the debounce strategy.

See comments in PR for more context.

Changes

Added

Added a useDebounce hook helper (internal use)

Changed

Modernized Autocomplete tests with userEvent and fixed act warnings
Replaced debounce with useDebounce to improve correctness and reduce potential bugs

Before

https://github.com/user-attachments/assets/b342fa4b-cba9-41b7-93dd-5e64e39dade1

After

Exhibits the exact same behaviour as before, just with improved correctness.

https://github.com/user-attachments/assets/a2109794-4c01-4c41-bd67-362801e64e28

Testing

To test this:

Load the Autocomplete basic story
Verify the search behaviour works as expected
- I did this by adding a console.log to the updateSearch function which is debounced
- If you want to see how the old behaviour breaks, modify the old debounce code with options like below:

const delayedSearch = debounce(updateSearch, debounceRate, { leading: true });

Changes can be tested via Pre-release

cloudflare-workers-and-pages[bot] commented 2 months ago

Deploying atlantis with Cloudflare Pages

Latest commit:	`5df1f3e`
Status:	✅ Deploy successful!
Preview URL:	https://16624de9.atlantis.pages.dev
Branch Preview URL:	https://cleanup-autocomplete-improve.atlantis.pages.dev

View logs

github-actions[bot] commented 2 months ago

Published Pre-release for 5df1f3e757e932eda207333dbfc15fe564571774 with versions:

  - @jobber/components@5.20.8-CLEANUPau.4+5df1f3e7

To install the new version(s) for Web run:

npm install @jobber/components@5.20.8-CLEANUPau.4+5df1f3e7

jdeichert commented 2 months ago

@taylorvnoj thanks for testing the pre-release! Glad to hear that it's working well over there 👌

GetJobber / atlantis