react-spectrum
28ceccbf - ComboBox refactoring (#1176)

Commit

4 years ago

ComboBox refactoring (#1176) * WIP: refactor mobile combobox * ComboBox state refactor * Add live region announcer for more consistent announcement with VoiceOver * Add missing strings to translations files * Updates for mobile combobox and add tests * Add aria-hidden to all elements other than combobox and popover when open * Fix tray size on chrome android * Move ariaHideOutside into @react-aria/overlays * Support placeholder in mobile combobox * Close when clicking on the button a second time * Various code cleanup and ref handling improvements * Correct aria-setsize with sections * Make live announcer behave more consistently * Only use live announcer on apple devices * Preserve defaultInputValue prop on initial render even if the defaultSelectedKey does not match * Remove tabIndex from listbox and options when using virtual focus iOS 14 moves real DOM focus even with aria-activedescendant otherwise * Only blur input on touch scroll * Make clear button not overlap validation icon in searchfield * Pass through style to ComboBoxInput so custom width without label works * Fix disabled styling of mobile combobox * Don't let long values wrap in mobile combobox * Fix page up/page down in combobox * Mobile combobox fixes * Calculate overlay positions based on visual viewport And do not close when viewport scrolls while resizing due to keyboard appearing * Fix custom width * Focus button when clicking on label on mobile * Prevent focus on clear button * Add label for invalid icon on mobile * fix docs build by fixing clearbutton type Co-authored-by: Daniel <dlu@livefyre.com> Co-authored-by: Danni <drobinson@livefyre.com>

References

#1176 - ComboBox refactoring

Author

devongovett

Parents

3d53f02c

Files62

.eslintignore
.eslintrc.js
packages
- @adobe/spectrum-css-temp/components
  - button
    - index.css
  - inputgroup
    - index.css
    - skin.css
  - search
    - index.css
  - textfield
    - index.css
    - skin.css
- @react-aria
  - combobox
    - intl
      - en-US.json
    - package.json
    - src
      - useComboBox.ts
    - test
      - useComboBox.test.js
  - i18n/src
    - index.ts
    - useFilter.ts
  - listbox
    - package.json
    - src
      - useOption.ts
  - live-announcer/src
    - LiveAnnouncer.tsx
  - menu/src
    - useMenuItem.ts
  - numberfield/src
    - useNumberField.ts
  - overlays
    - src
      - ariaHideOutside.ts
      - calculatePosition.ts
      - index.ts
      - useModal.tsx
      - useOverlayPosition.ts
    - test
      - ariaHideOutside.test.js
  - select/src
    - HiddenSelect.tsx
  - selection/src
    - useSelectableCollection.ts
    - useSelectableItem.ts
  - textfield/src
    - useTextField.ts
  - virtualizer/src
    - Virtualizer.tsx
- @react-spectrum
  - button/src
    - ClearButton.tsx
  - combobox
    - intl
      - en-US.json
    - package.json
    - src
      - ComboBox.tsx
      - MobileComboBox.tsx
      - combobox.css
    - stories
      - ComboBox.stories.tsx
    - test
      - ComboBox.test.js
  - datepicker/src
    - DatePickerField.tsx
  - label/src
    - Field.tsx
    - index.ts
  - listbox/src
    - ListBoxBase.tsx
  - numberfield/src
    - NumberField.tsx
  - overlays/src
    - Popover.tsx
    - Tray.tsx
  - searchfield
    - src
      - SearchField.tsx
    - stories
      - SearchField.stories.js
  - test-utils/src
    - events.ts
  - textfield/src
    - TextArea.tsx
    - TextField.tsx
    - TextFieldBase.tsx
- @react-stately
  - collections/src
    - getItemCount.ts
    - index.ts
  - combobox
    - src
      - useComboBoxState.ts
    - test
      - useComboBoxState.test.js
  - list/src
    - index.ts
    - useSingleSelectListState.ts
- @react-types
  - combobox/src
    - index.d.ts
  - label/src
    - index.d.ts
  - overlays/src
    - index.d.ts
  - textfield/src
    - index.d.ts
tsconfig.json

react-spectrum 28ceccbf - ComboBox refactoring (#1176)

react-spectrum
28ceccbf - ComboBox refactoring (#1176)