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! ๐