(WIP) Autocomplete with menu #7181

LFDanLu · 2024-10-11T21:52:47Z

Closes

#7248 has a version that always persists focus, to test on Monday

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

RSP

issues outlined in various comments, basically boils down to ideally using the wrapped collection components state

rspbot · 2024-10-11T22:18:38Z

Build successful! 🎉

packages/react-aria-components/src/Menu.tsx

packages/react-aria-components/src/Autocomplete.tsx

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

rspbot · 2024-10-23T22:02:19Z

Build successful! 🎉

rspbot · 2024-10-24T00:32:06Z

Build successful! 🎉

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

LFDanLu · 2024-10-24T18:07:48Z

packages/@react-aria/autocomplete/src/useAutocomplete.ts

+    // TODO: how best to trigger the focused element's action? Currently having the registered callback handle dispatching a
+    // keyboard event
+    switch (e.key) {


At the moment the keyboard event dispatch handling happens in Menu directly, but it might be good to have those in a hook somewhere. Its a bit tough since we don't have access to the wrapped collection and collection ref at the top level, but potentially could just have the callbackRef expect to receive the collection and collection ref instead of just the id, open to opinions here

rspbot · 2024-10-24T18:07:59Z

Build successful! 🎉

LFDanLu · 2024-10-24T18:09:24Z

packages/@react-aria/autocomplete/src/useAutocomplete.ts

+      // TODO: note that the searchbox role causes newly typed letters to interrupt the announcement of the number of available options in Safari.
+      // I tested on iPad/Android/etc and the combobox role doesn't seem to do that but it will announce that there is a listbox which isn't true
+      // and it will say press Control Option Space to display a list of options which is also incorrect. To be fair though, our combobox doesn't open with
+      // that combination of buttons
+      role: 'searchbox',


something to note with the announcements, hopefully this won't be a problem as browsers/screenreaders begin to handle announcing of aria-activedescendant properly

LFDanLu · 2024-10-24T18:11:57Z

packages/@react-aria/autocomplete/src/useAutocomplete.ts

+      onHoverStart: (e) => {
+        // TODO: another thing to think about, what is the best way to past this to menu/wrapped collection component so that hovering on
+        // a item also updates the focusedNode. Perhaps we should just pass down setFocusedNodeId instead
+        state.setFocusedNodeId(e.target.id);
+      }


Is this weird also? Focus on hover happens in the menu (and future other wrapped collections) and thus needs to communicate this change upwards. This felt better that having the menu hooks accept setFocusedNodeId

LFDanLu · 2024-10-24T18:15:17Z

packages/@react-aria/collections/src/BaseCollection.ts

+  // TODO: this is pretty specific to menu, will need to check if it is generic enough
+  // Will need to handle varying levels I assume but will revisit after I get searchable menu working for base menu
+  // TODO: an alternative is to simply walk the collection and add all item nodes that match the filter and any sections/separators we encounter
+  // to an array, then walk that new array and fix all the next/Prev keys while adding them to the new collection
+  filter(filterFn: (nodeValue: string) => boolean): BaseCollection<T> {


Definitely specific to menu, will need to update when we handle other collection components. Collections is in alpha so that should shield us from any changes that may need to happen to this function

rspbot · 2024-10-28T18:08:03Z

Build successful! 🎉

romansndlr · 2024-10-29T17:12:11Z

Is there maybe some document explaining the motivation for this new component and what it's going to be?

LFDanLu · 2024-10-29T17:50:40Z

@romansndlr nothing that I can quite share at the moment, but essentially this will support the ability to filter a menu in the same fashion that a combobox does (virtual focus so the user remains in the input), but without needing the menu to be within a separate popover (like Spotlight search on macOS). Still early stages for it but we hope that the wrapping Autocomplete will eventually be able to take any kind of collection component (e.g. gridlist, table, etc) rather than just a menu.

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

rspbot · 2024-11-01T20:15:28Z

Build successful! 🎉

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

rspbot · 2024-11-06T01:31:58Z

Build successful! 🎉

… testing

rspbot · 2024-11-07T00:28:08Z

Build successful! 🎉

rspbot · 2024-11-07T18:22:02Z

Build successful! 🎉

cheema-corellian · 2024-11-17T11:53:24Z

@LFDanLu Is it correct to assume that since this component appears to use combobox as the base, much of the combobox functionality will be retained? Of particular interest is the ability to categorize the search results as described in this discussion topic: #7308

Also, is there a very rough estimate on when this feature might make it into a release? And is it targeting S1, S2 or both?

LFDanLu · 2024-11-18T17:42:59Z

@cheema-corellian The search/filtering capabilities of combobox along with the same kind of "virtual" focus interactions will be part of autocomplete, yes. The experience in #7308 should be possible with this component I imagine, barring the additional "Add new employee" item at the bottom which will need some additional handling. I hope to have this feature out within the next month, at least in an alpha form in React Aria Components but additional work needs to be done for submenu support and supporting any generic collection rather than just menu. We will for sure target S2 once it stabilizes in React Aria Components, but not sure about S1 to be honest.

…ual 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)

rspbot · 2024-11-20T22:39:11Z

Build successful! 🎉

rspbot · 2024-11-21T00:21:08Z

Build successful! 🎉

rspbot · 2024-11-21T00:21:10Z

## API Changes

react-aria-components

/react-aria-components:Autocomplete

+Autocomplete {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children?: ReactNode | ((AutocompleteRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((AutocompleteRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultFilter?: (string, string) => boolean
+  defaultInputValue?: string
+  id?: string
+  inputValue?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  name?: string
+  onBlur?: (FocusEvent<HTMLInputElement>) => void
+  onFocus?: (FocusEvent<HTMLInputElement>) => void
+  onFocusChange?: (boolean) => void
+  onInputChange?: (string) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  slot?: string | null
+  style?: CSSProperties | ((AutocompleteRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

@react-aria/autocomplete

/@react-aria/autocomplete:useAutocomplete

+useAutocomplete {
+  props: AriaAutocompleteOptions
+  state: AutocompleteState
+  returnVal: undefined
+}

/@react-aria/autocomplete:AriaAutocompleteProps

+AriaAutocompleteProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children: ReactNode
+  defaultInputValue?: string
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  id?: string
+  inputValue?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  label?: ReactNode
+  name?: string
+  onBlur?: (FocusEvent<HTMLInputElement>) => void
+  onFocus?: (FocusEvent<HTMLInputElement>) => void
+  onFocusChange?: (boolean) => void
+  onInputChange?: (string) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholder?: string
+}

/@react-aria/autocomplete:AriaAutocompleteOptions

+AriaAutocompleteOptions {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  collectionRef: RefObject<HTMLElement | null>
+  defaultInputValue?: string
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  id?: string
+  inputRef: RefObject<HTMLInputElement | null>
+  inputValue?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  label?: ReactNode
+  name?: string
+  onBlur?: (FocusEvent<HTMLInputElement>) => void
+  onFocus?: (FocusEvent<HTMLInputElement>) => void
+  onFocusChange?: (boolean) => void
+  onInputChange?: (string) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholder?: string
+}

/@react-aria/autocomplete:AutocompleteAria

+AutocompleteAria {
+  collectionProps: CollectionOptions
+  descriptionProps: DOMAttributes
+  inputProps: InputHTMLAttributes<HTMLInputElement>
+  labelProps: DOMAttributes
+}

/@react-aria/autocomplete:CollectionOptions

+CollectionOptions {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  disallowTypeAhead: boolean
+  id?: string
+  shouldUseVirtualFocus: boolean
+}

@react-aria/collections

/@react-aria/collections:BaseCollection

 BaseCollection <T> {
   addNode: (CollectionNode<T>) => void
   at: () => Node<T>
   clone: () => this
   commit: (Key | null, Key | null, any) => void
+  filter: ((string) => boolean) => BaseCollection<T>
   getChildren: (Key) => Iterable<Node<T>>
   getFirstKey: () => void
   getItem: (Key) => Node<T> | null
   getKeyAfter: (Key) => void
   getKeys: () => void
   getLastKey: () => void
   removeNode: (Key) => void
   size: any
   undefined: () => void
 }

@react-aria/menu

/@react-aria/menu:AriaMenuOptions

 AriaMenuOptions <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   isVirtualized?: boolean
   items?: Iterable<T>
   keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onClose?: () => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
+  shouldUseVirtualFocus?: boolean
 }

/@react-aria/menu:getItemId

+getItemId <T> {
+  state: TreeState<T>
+  itemKey: Key
+  returnVal: undefined
+}

/@react-aria/menu:menuData

+menuData {
+  UNTYPED
+}

@react-aria/selection

/@react-aria/selection:SelectableItemOptions

 SelectableItemOptions {
   allowsDifferentPressOrigin?: boolean
   focus?: () => void
+  id?: string
   isDisabled?: boolean
   isVirtualized?: boolean
   key: Key
   linkBehavior?: 'action' | 'selection' | 'override' | 'none' = 'action'
   ref: RefObject<FocusableElement | null>
   selectionManager: MultipleSelectionManager
   shouldSelectOnPressUp?: boolean
   shouldUseVirtualFocus?: boolean
 }

@react-aria/utils

/@react-aria/utils:CLEAR_FOCUS_EVENT

+CLEAR_FOCUS_EVENT {
+  UNTYPED
+}

/@react-aria/utils:DELAY_UPDATE

+DELAY_UPDATE {
+  UNTYPED
+}

/@react-aria/utils:FOCUS_EVENT

+FOCUS_EVENT {
+  UNTYPED
+}

/@react-aria/utils:UPDATE_ACTIVEDESCENDANT

+UPDATE_ACTIVEDESCENDANT {
+  UNTYPED
+}

@react-stately/autocomplete

/@react-stately/autocomplete:useAutocompleteState

+useAutocompleteState {
+  props: AutocompleteStateOptions
+  returnVal: undefined
+}

/@react-stately/autocomplete:AutocompleteProps

+AutocompleteProps {
+  autoFocus?: boolean
+  defaultInputValue?: string
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  inputValue?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  label?: ReactNode
+  onBlur?: (FocusEvent<HTMLInputElement>) => void
+  onFocus?: (FocusEvent<HTMLInputElement>) => void
+  onFocusChange?: (boolean) => void
+  onInputChange?: (string) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholder?: string
+}

/@react-stately/autocomplete:AutocompleteStateOptions

+AutocompleteStateOptions {
+  autoFocus?: boolean
+  defaultInputValue?: string
+  description?: ReactNode
+  errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  inputValue?: string
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  label?: ReactNode
+  onBlur?: (FocusEvent<HTMLInputElement>) => void
+  onFocus?: (FocusEvent<HTMLInputElement>) => void
+  onFocusChange?: (boolean) => void
+  onInputChange?: (string) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  placeholder?: string
+}

/@react-stately/autocomplete:AutocompleteState

+AutocompleteState {
+  focusedNodeId: string | null
+  inputValue: string
+  setFocusedNodeId: (string | null) => void
+  setInputValue: (string) => void
+}

cheema-corellian · 2024-11-21T01:13:08Z

@cheema-corellian The search/filtering capabilities of combobox along with the same kind of "virtual" focus interactions will be part of autocomplete, yes. The experience in #7308 should be possible with this component I imagine, barring the additional "Add new employee" item at the bottom which will need some additional handling. I hope to have this feature out within the next month, at least in an alpha form in React Aria Components but additional work needs to be done for submenu support and supporting any generic collection rather than just menu. We will for sure target S2 once it stabilizes in React Aria Components, but not sure about S1 to be honest.

@LFDanLu Thanks for providing this update. It is very helpful. I look forward to trying this component in S2 when it becomes available.

LFDanLu added 6 commits October 9, 2024 14:22

scaffolding, copied Combobox and renamed to Autocomplete

c33ac96

get listbox rendering by default without open state

a185473

update intl file and more clean up to get rid of combobox stuff

e6fa7c1

fix lint

61aab83

rough working version of Menu instead of Listbox in autocomplete

66fecc8

issues outlined in various comments, basically boils down to ideally using the wrapped collection components state

fix submenu

779309b

LFDanLu commented Oct 11, 2024

View reviewed changes

packages/react-aria-components/src/Menu.tsx Outdated Show resolved Hide resolved

LFDanLu commented Oct 15, 2024

View reviewed changes

packages/react-aria-components/src/Autocomplete.tsx Outdated Show resolved Hide resolved

LFDanLu added the in sprint label Oct 16, 2024

LFDanLu added 6 commits October 18, 2024 17:20

Update autocomplete to have the wrapped menu filter itself

78de7f8

fix keyboard interactions, and clean up

e0f098a

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

5914d11

add announcements to menu and various clean up

12480fd

update yarn.lock

ad8942a

Merge branch 'main' of github.com:adobe/react-spectrum into autocomplete

70c2d0f

adobe deleted a comment from rspbot Oct 22, 2024

LFDanLu added 3 commits October 23, 2024 11:55

get rid of dom node in Autocomplete and fix readOnly bugs

9812c3c

fix build failure

8478937

test against popover experience

3fbd35f

fix popover story

e15d999

properly clear aria-activedecendant

368a677

LFDanLu commented Oct 24, 2024

View reviewed changes

packages/@react-aria/autocomplete/intl/ar-AE.json Outdated Show resolved Hide resolved

LFDanLu commented Oct 24, 2024

View reviewed changes

Merge branch 'main' into autocomplete

6c498f1

properly focus trap the autocomplete popover

fe5bfbe

LFDanLu mentioned this pull request Oct 30, 2024

GridList should support autoFocus #7105

Open

LFDanLu added 2 commits November 1, 2024 11:31

update yarn.lock

9a58613

LFDanLu added 4 commits November 4, 2024 16:32

dont autofocus if user hasnt typed in the field yet

574bd67

add delay for now to make NVDA announcement better

ae7a00f

fix lint and scrap custom announcements

7b11c5d

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

04e8777

LFDanLu added 2 commits November 6, 2024 15:27

more tests and fixes to BaseCollection and keyboard interactions from…

79c9064

… testing

fix lint and add RAC test

b20b626

LFDanLu added 2 commits November 7, 2024 10:09

Merge branch 'main' of github.com:adobe/react-spectrum into autocomplete

28afe21

use MenuSection

2d0a15f

adobe deleted a comment from rspbot Nov 7, 2024

LFDanLu added 2 commits November 20, 2024 14:48

Merge branch 'main' of github.com:adobe/react-spectrum into autocomplete

682357f

fix lint and test with wrapping Listbox

3871e7b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(WIP) Autocomplete with menu #7181

(WIP) Autocomplete with menu #7181

LFDanLu commented Oct 11, 2024 •

edited

Loading

rspbot commented Oct 11, 2024

rspbot commented Oct 23, 2024

rspbot commented Oct 24, 2024

LFDanLu Oct 24, 2024

rspbot commented Oct 24, 2024

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024

rspbot commented Oct 28, 2024

romansndlr commented Oct 29, 2024

LFDanLu commented Oct 29, 2024

rspbot commented Nov 1, 2024

rspbot commented Nov 6, 2024

rspbot commented Nov 7, 2024

rspbot commented Nov 7, 2024

cheema-corellian commented Nov 17, 2024 •

edited

Loading

LFDanLu commented Nov 18, 2024

rspbot commented Nov 20, 2024

rspbot commented Nov 21, 2024

rspbot commented Nov 21, 2024

cheema-corellian commented Nov 21, 2024

(WIP) Autocomplete with menu #7181

Are you sure you want to change the base?

(WIP) Autocomplete with menu #7181

Conversation

LFDanLu commented Oct 11, 2024 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Oct 11, 2024

rspbot commented Oct 23, 2024

rspbot commented Oct 24, 2024

LFDanLu Oct 24, 2024

Choose a reason for hiding this comment

rspbot commented Oct 24, 2024

LFDanLu Oct 24, 2024

Choose a reason for hiding this comment

LFDanLu Oct 24, 2024

Choose a reason for hiding this comment

LFDanLu Oct 24, 2024

Choose a reason for hiding this comment

rspbot commented Oct 28, 2024

romansndlr commented Oct 29, 2024

LFDanLu commented Oct 29, 2024

rspbot commented Nov 1, 2024

rspbot commented Nov 6, 2024

rspbot commented Nov 7, 2024

rspbot commented Nov 7, 2024

cheema-corellian commented Nov 17, 2024 • edited Loading

LFDanLu commented Nov 18, 2024

rspbot commented Nov 20, 2024

rspbot commented Nov 21, 2024

rspbot commented Nov 21, 2024

react-aria-components

/react-aria-components:Autocomplete

@react-aria/autocomplete

/@react-aria/autocomplete:useAutocomplete

/@react-aria/autocomplete:AriaAutocompleteProps

/@react-aria/autocomplete:AriaAutocompleteOptions

/@react-aria/autocomplete:AutocompleteAria

/@react-aria/autocomplete:CollectionOptions

@react-aria/collections

/@react-aria/collections:BaseCollection

@react-aria/menu

/@react-aria/menu:AriaMenuOptions

/@react-aria/menu:getItemId

/@react-aria/menu:menuData

@react-aria/selection

/@react-aria/selection:SelectableItemOptions

@react-aria/utils

/@react-aria/utils:CLEAR_FOCUS_EVENT

/@react-aria/utils:DELAY_UPDATE

/@react-aria/utils:FOCUS_EVENT

/@react-aria/utils:UPDATE_ACTIVEDESCENDANT

@react-stately/autocomplete

/@react-stately/autocomplete:useAutocompleteState

/@react-stately/autocomplete:AutocompleteProps

/@react-stately/autocomplete:AutocompleteStateOptions

/@react-stately/autocomplete:AutocompleteState

cheema-corellian commented Nov 21, 2024

LFDanLu commented Oct 11, 2024 •

edited

Loading

cheema-corellian commented Nov 17, 2024 •

edited

Loading