fix: various S2 bug fixes from docs testing #9272

LFDanLu · 2025-12-03T00:26:54Z

Title sucks sorry, but see the below for what got fixed:

[Regression] S2 DateField/DatePicker: Cannot focus S2 DateField/DatePicker on touch devices. Test horizontal orientation in the docs on a phone.
[Regression] TagGroup: remove button no longer works.
SelectBox:
- should have max-width: 100% so it does not overflow container on mobile
- Remove checkboxes from single select SelectBoxGroup
LinkButton: premium/genai gradient variants
remove allowEmptyCollection prop from Picker in RSP and S2
RangeCalendar (incl RAC/RSP): displays unavailable dates as selected when allowsNoncontiguousRanges is true.

✅ 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:

Test the above mentioned bugs via docs and storybook.
For the RangeCalendar bug, you can reproduce manually via any of the isDateUnavailable stories for RAC/RSP/S2 on main if you turn on both isInvalid and allowsNonContiguousRanges via controls and select a range that contains an unavailable date (e.g. http://reactspectrum.blob.core.windows.net/reactspectrum/7e5427c9d4f1bc6b21b3cdf1d78d37ad0a364acc/storybook/index.html?path=/story/date-and-time-rangecalendar--date-unavailable&args=allowsNonContiguousRanges:!true;isInvalid:!true&providerSwitcher-express=false).

🧢 Your Project:

RSP

…hat behavior

… multiple selection

rspbot · 2025-12-03T01:58:24Z

Build successful! 🎉

rspbot · 2025-12-03T01:58:25Z

## API Changes

@react-spectrum/picker

/@react-spectrum/picker:Picker

 Picker <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
-  allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<{}>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   form?: string
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/picker:SpectrumPickerProps

 SpectrumPickerProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
-  allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<T>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   form?: string
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:Picker

 Picker <M extends SelectionMode = 'single', T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
-  allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   selectionMode?: SelectionMode = 'single'
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/@react-spectrum/s2:PickerProps

 PickerProps <M extends SelectionMode = 'single', T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
-  allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   selectionMode?: SelectionMode = 'single'
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

snowystinger

run chromatic?

packages/@react-spectrum/s2/src/Button.tsx

snowystinger · 2025-12-03T02:02:15Z

packages/@react-spectrum/s2/src/Field.tsx

      }}
      onTouchEnd={e => {
-        if (!(e.target as Element).closest('button,input,textarea')) {
+        let target = e.target as HTMLElement;


test for this change?

I added a test for textarea, but couldn't get the datepicker test to quite simulate the proper touch end event on the content editable for some reason... Using user event doesn't trigger the touchEnd properly and firing events on the spinbuttons directly doesn't seem to work either

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

LFDanLu · 2025-12-03T18:44:44Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1074

ugh we have too many button variants... I'll move those to a separate story

LFDanLu · 2025-12-03T19:09:54Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1075

packages/@react-spectrum/s2/test/TextField.test.tsx

tests are failing

LFDanLu · 2025-12-03T20:22:22Z

packages/@react-aria/calendar/src/useCalendarCell.ts

+    // don't mark unavaliable + invalid dates in range calendars as selected, that case only comes up via allowsNoncontiguousRanges
+    // and thus those unavailable dates shouldn't be selected. For single select calendars, we mark unavailble + invalid days as selected for styling reasons
+    if (!('highlightedRange' in state) || !isUnavailable) {
+      isSelected = true;
+    }


behavior open to debate, but the single select calendar case had a prior test for it hence why the special casing. I think this makes sense, range calendars don't actually include unavailable days that fall inside their range selection, but a single select calendar might have a value/default value set that is invalid + unavailable

LFDanLu added 6 commits December 2, 2025 14:19

remove allowsEmptycollection from our pickers since we dont support t…

1d99290

…hat behavior

fix focusing DateFields on mobile tap

3f41d87

fix SelectBoxGroup overflow when horizontal and only show checkbox in…

fb9e7e5

… multiple selection

fix taggroup remove button

513a9f9

update link button to support genai and premium variants

49c488d

clear the context at the collapse collection level instead

8c2b0fc

snowystinger reviewed Dec 3, 2025

View reviewed changes

review comments

62171d0

chromatic fix

0de2963

make sure unavaliable dates are never marked as selected

aca98d3

snowystinger previously approved these changes Dec 3, 2025

View reviewed changes

packages/@react-spectrum/s2/test/TextField.test.tsx Outdated Show resolved Hide resolved

LFDanLu added 2 commits December 3, 2025 12:18

fix test case

c0e7f6f

get rid of act

8744470

LFDanLu commented Dec 3, 2025

View reviewed changes

LFDanLu added ready for review release labels Dec 3, 2025

Merge branch 'main' into s2_bug_fixes

207bb26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: various S2 bug fixes from docs testing #9272

fix: various S2 bug fixes from docs testing #9272

Uh oh!

LFDanLu commented Dec 3, 2025 •

edited

Loading

Uh oh!

rspbot commented Dec 3, 2025

Uh oh!

rspbot commented Dec 3, 2025

Uh oh!

snowystinger left a comment

Uh oh!

Uh oh!

snowystinger Dec 3, 2025

Uh oh!

LFDanLu Dec 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

LFDanLu commented Dec 3, 2025 •

edited

Loading

Uh oh!

LFDanLu commented Dec 3, 2025

Uh oh!

Uh oh!

LFDanLu Dec 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: various S2 bug fixes from docs testing #9272

Are you sure you want to change the base?

fix: various S2 bug fixes from docs testing #9272

Uh oh!

Conversation

LFDanLu commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Dec 3, 2025

Uh oh!

rspbot commented Dec 3, 2025

@react-spectrum/picker

/@react-spectrum/picker:Picker

/@react-spectrum/picker:SpectrumPickerProps

@react-spectrum/s2

/@react-spectrum/s2:Picker

/@react-spectrum/s2:PickerProps

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snowystinger Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LFDanLu commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LFDanLu commented Dec 3, 2025

Uh oh!

Uh oh!

LFDanLu Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LFDanLu commented Dec 3, 2025 •

edited

Loading

LFDanLu Dec 3, 2025 •

edited

Loading

LFDanLu commented Dec 3, 2025 •

edited

Loading