react-spectrum
react-spectrum copied to clipboard
fix(#1999): refactor to use SearchAutocomplete and v3 of AlgoliaSearch API
Closes #1999 replacing #2016
โ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue 1999.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [x] Updated documentation (if it already exists for this component).
- [x] Looked at the Accessibility Practices for this feature - Aria Practices
๐ Test Instructions:
Test documentation search functionality using https://reactspectrum.blob.core.windows.net/reactspectrum/585b07519a6ed53910995ac3eeb0622a9d581c15/docs/index.html.
๐งข Your Project:
RSP
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
In Safari, there's some weird padding on the bottom, and the field is offset. When you start typing, it shifts down.

Also a bit weird that the search field overlaps the content of the page when you scroll down. I guess we could either put a bar up there across the whole page, or move the search field into the sidebar like the spectrum site. That's less convenient on mobile/small screens though since you'd have to go into the hamburger menu first.
Build successful! ๐
Build successful! ๐
In Safari, there's some weird padding on the bottom, and the field is offset. When you start typing, it shifts down.
Also a bit weird that the search field overlaps the content of the page when you scroll down. I guess we could either put a bar up there across the whole page, or move the search field into the sidebar like the spectrum site. That's less convenient on mobile/small screens though since you'd have to go into the hamburger menu first.
See a53f8496bfec2dfb161dac36866876eb16f491a1 and test with https://reactspectrum.blob.core.windows.net/reactspectrum/a53f8496bfec2dfb161dac36866876eb16f491a1/docs/index.html
I think main content should scroll rather than the document.body, this way we won't have cases where focused content, like an anchor, hidden underneath the page header when the page is scrolled.
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Maybe there's something we can do in the way the site is scraped to avoid this repetition. For example, searching for a term shows both it and all of its sub-headings:
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐
Build successful! ๐