Skip to content

Commit f90799b

Browse files
LFDanLuLFDanLu
authored
feat: Add Autocomplete wrapper for Menu and ListBox (#7181)
* scaffolding, copied Combobox and renamed to Autocomplete * get listbox rendering by default without open state * update intl file and more clean up to get rid of combobox stuff * fix lint * rough working version of Menu instead of Listbox in autocomplete issues outlined in various comments, basically boils down to ideally using the wrapped collection components state * fix submenu * Update autocomplete to have the wrapped menu filter itself * fix keyboard interactions, and clean up ended up going with dispatching events to the menu/menuitem so we can piggyback off of useSelectableCollection and menus press handling for submenutriggers, onAction, and link handling * fix menu, add more stories, fix strict * add announcements to menu and various clean up * update yarn.lock * get rid of dom node in Autocomplete and fix readOnly bugs * fix build failure * test against popover experience * fix popover story * properly clear aria-activedecendant * cleanup * fix build * properly focus trap the autocomplete popover * update interaction pattern as per discussion for now we will have first item auto focus, no custom announcements, and clear focus on backspace or arrow left/right. See https://docs.google.com/spreadsheets/d/12M--aeeNK4Kruzg8GnO7L-_DUsQE29_bWJzu4yI4-UA/edit?gid=1690380375#gid=1690380375 for a testing matrix * update yarn.lock * dont autofocus if user hasnt typed in the field yet * add delay for now to make NVDA announcement better * fix lint and scrap custom announcements complications making the custom announcements for safari have a delay for when typing ahead but not when using the arrow keys to move through the options, so stashed it for now * intial tests * more tests and fixes to BaseCollection and keyboard interactions from testing * fix lint and add RAC test * use MenuSection * (WIP) Refactor autocomplete logic to use custom events to update virtual focus (#7378) * get clear and focus first working with custom events * fix delayed id update and update id on item hover * refactor logic to use custom events to move virtual focus instead of a callback ref * move logic out of menu and down into selection hooks * use useEvent didnt use it in autocomplete hook since the ref might not initially exist which is a problem for useEvent (it wont setup the listener) * fix lint and test with wrapping Listbox * refactor so that we defer to the child input as much as possible for behavior also removes the delay event, readd if we find there can be a batch case where we need to be more careful about the event that is being delayed * cleanup * fix listbox test * fix build and react 19 * get rid of leftover react 19 testing changes * clean up some todos * fix listbox listeners not registering * updating tests and making enter trigger listbox link * initial review comments * update tests and remove menu id coercing in favor of user defined ids * fix lock * update forward ref for react fast refresh * updates from testing * make virtual focus collections non tabbable checked in iOS 17, previous issue of voiceover moving focus to the collection doesnt seem to happen anymore. This change makes sure that users cant tab from the autocomplete to the wrapped collection * use event target on listener for id instead of in useSelectableItem * update story to match shell use case more closely * properly stop propagation of original input keyup event so triggering links work in listbox
1 parent b4ed1d4 commit f90799b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+2240
-84
lines changed

‎packages/@react-aria/autocomplete/intl/ar-AE.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "مقترحات"
3+
}

‎packages/@react-aria/autocomplete/intl/bg-BG.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Предложения"
3+
}

‎packages/@react-aria/autocomplete/intl/cs-CZ.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Návrhy"
3+
}

‎packages/@react-aria/autocomplete/intl/da-DK.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Forslag"
3+
}

‎packages/@react-aria/autocomplete/intl/de-DE.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Empfehlungen"
3+
}

‎packages/@react-aria/autocomplete/intl/el-GR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Προτάσεις"
3+
}

‎packages/@react-aria/autocomplete/intl/en-US.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Suggestions"
3+
}

‎packages/@react-aria/autocomplete/intl/es-ES.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Sugerencias"
3+
}

‎packages/@react-aria/autocomplete/intl/et-EE.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Soovitused"
3+
}

‎packages/@react-aria/autocomplete/intl/fi-FI.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Ehdotukset"
3+
}

‎packages/@react-aria/autocomplete/intl/fr-FR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Suggestions"
3+
}

‎packages/@react-aria/autocomplete/intl/he-IL.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "הצעות"
3+
}

‎packages/@react-aria/autocomplete/intl/hr-HR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Prijedlozi"
3+
}

‎packages/@react-aria/autocomplete/intl/hu-HU.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Javaslatok"
3+
}

‎packages/@react-aria/autocomplete/intl/it-IT.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Suggerimenti"
3+
}

‎packages/@react-aria/autocomplete/intl/ja-JP.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "候補"
3+
}

‎packages/@react-aria/autocomplete/intl/ko-KR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "제안"
3+
}

‎packages/@react-aria/autocomplete/intl/lt-LT.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Pasiūlymai"
3+
}

‎packages/@react-aria/autocomplete/intl/lv-LV.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Ieteikumi"
3+
}

‎packages/@react-aria/autocomplete/intl/nb-NO.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Forslag"
3+
}

‎packages/@react-aria/autocomplete/intl/nl-NL.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Suggesties"
3+
}

‎packages/@react-aria/autocomplete/intl/pl-PL.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Sugestie"
3+
}

‎packages/@react-aria/autocomplete/intl/pt-BR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Sugestões"
3+
}

‎packages/@react-aria/autocomplete/intl/pt-PT.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Sugestões"
3+
}

‎packages/@react-aria/autocomplete/intl/ro-RO.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Sugestii"
3+
}

‎packages/@react-aria/autocomplete/intl/ru-RU.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Предложения"
3+
}

‎packages/@react-aria/autocomplete/intl/sk-SK.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Návrhy"
3+
}

‎packages/@react-aria/autocomplete/intl/sl-SI.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Predlogi"
3+
}

‎packages/@react-aria/autocomplete/intl/sr-SP.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Predlozi"
3+
}

‎packages/@react-aria/autocomplete/intl/sv-SE.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Förslag"
3+
}

‎packages/@react-aria/autocomplete/intl/tr-TR.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Öneriler"
3+
}

‎packages/@react-aria/autocomplete/intl/uk-UA.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "Пропозиції"
3+
}

‎packages/@react-aria/autocomplete/intl/zh-CN.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "建议"
3+
}

‎packages/@react-aria/autocomplete/intl/zh-TW.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"collectionLabel": "建議"
3+
}

‎packages/@react-aria/autocomplete/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,12 @@
2323
},
2424
"dependencies": {
2525
"@react-aria/combobox": "^3.11.0",
26+
"@react-aria/i18n": "^3.12.3",
27+
"@react-aria/interactions": "^3.22.5",
2628
"@react-aria/listbox": "^3.13.6",
2729
"@react-aria/searchfield": "^3.7.11",
2830
"@react-aria/utils": "^3.26.0",
31+
"@react-stately/autocomplete": "3.0.0-alpha.1",
2932
"@react-stately/combobox": "^3.10.1",
3033
"@react-types/autocomplete": "3.0.0-alpha.27",
3134
"@react-types/button": "^3.10.1",

‎packages/@react-aria/autocomplete/src/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,8 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212
export {useSearchAutocomplete} from './useSearchAutocomplete';
13+
export {useAutocomplete} from './useAutocomplete';
14+
1315
export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete';
1416
export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
17+
export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions} from './useAutocomplete';

0 commit comments

Comments
 (0)