(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

packages/@react-aria/menu/src/useMenu.ts

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

packages/@react-aria/menu/src/useMenu.ts

+    lastSize.current = optionCount;
+  }, [announced, setAnnounced, optionCount, stringFormatter, state.selectionManager.focusedKey]);
+
+  // TODO: Omitted the custom announcement for selection because we expect to only trigger onActions for Autocomplete, selected key isn't a thing


For now we've decided to only handle the case where pressing on a menu item triggers an action but technically you could have a multi selection menu wrapped in the Autocomplete with which this announcement would need to be brought back

LFDanLu · 2024-10-24T18:29:25Z

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

+  // TODO: Since menu only has `items` and not `defaultItems`, this means the user can't have completly controlled items like in ComboBox,
+  // we always perform the filtering for them.
+  let filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);


One difference to note, but the user can always pass their own defaultFilterFn that returns true always if they want the items they provide to be fully controlled (aka if they do their own filtering outside the Autocomplete and thus don't want our default filter fn to also be applied). It does feel a bit confusing though, but we'd have to add defaultItems to Menu if we want to make items fully controlled...

LFDanLu · 2024-10-24T18:32:08Z

packages/react-aria-components/src/index.ts

+// TODO: export the respective contexts here
+export {Autocomplete} from './Autocomplete';


Waiting for the api to settle. Right now there are three contexts in Autocomplete: AutocompleteContext (standard one for users to pass stuff from an external component to the Autocomplete component), AutocompleteStateContext (also standard, for accessing the state from within the component), InternalAutocompleteContext (for accessing the stuff Autocomplete wants to pass to its wrapped collection components)

LFDanLu · 2024-10-24T18:34:14Z

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

+// TODO: how would we handle this for a DialogTrigger? I guess we could automatically grab the overlaytrigger state from context and send a onAction that gets chained by the one provided
+// to Menu


Would the onus be on the user to access the Dialog's close from the render function and call it in the onAction they provide to the Menu

LFDanLu · 2024-10-24T18:37:39Z

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

+  useEffect(() => {
+    if (register) {
+      register((e: ReactKeyboardEvent) => {


The register and clearVirtualFocus that happen here feel like they should be in the menu hooks, would we be comfortable adding register and inputValue (or something along those lines) as something the hooks accept?

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

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

## 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 <T> {
+  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
+  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 <T> {
+  descriptionProps: DOMAttributes
+  inputProps: InputHTMLAttributes<HTMLInputElement>
+  labelProps: DOMAttributes
+  menuProps: AriaMenuOptions<T>
+  register: ((KeyboardEvent) => string | null) => void
+}

@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
+  onHoverStart?: (HoverEvent) => 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-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
+}

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

packages/@react-aria/menu/src/useMenu.ts Outdated Show resolved Hide resolved

LFDanLu commented Oct 24, 2024

View reviewed changes

LFDanLu added 3 commits October 24, 2024 11:42

cleanup

82b3120

fix build

423b73c

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

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

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024

LFDanLu Oct 24, 2024 •

edited

Loading

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

rspbot commented Nov 7, 2024

		// TODO: export the respective contexts here
		export {Autocomplete} from './Autocomplete';

		// TODO: how would we handle this for a DialogTrigger? I guess we could automatically grab the overlaytrigger state from context and send a onAction that gets chained by the one provided
		// to Menu

(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

Choose a reason for hiding this comment

rspbot commented Oct 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LFDanLu Oct 24, 2024 • edited Loading

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

rspbot commented Nov 7, 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/collections

/@react-aria/collections:BaseCollection

@react-aria/menu

/@react-aria/menu:AriaMenuOptions

/@react-aria/menu:getItemId

/@react-aria/menu:menuData

@react-stately/autocomplete

/@react-stately/autocomplete:useAutocompleteState

/@react-stately/autocomplete:AutocompleteProps

/@react-stately/autocomplete:AutocompleteStateOptions

/@react-stately/autocomplete:AutocompleteState

LFDanLu commented Oct 11, 2024 •

edited

Loading

LFDanLu Oct 24, 2024 •

edited

Loading