fix: Popover positioning and various other bugs #8816

snowystinger · 2025-09-04T04:52:01Z

Closes

Fixes popover positioning, see first commit's new story to see bad behaviour by scrolling trigger partially out of view horizontally to start. You'll see the popover rendered way out of place. After the second commit, it has been fixed and the popover will be bound by the scrolling element.

Fixes pending state for buttons so they aren't clickable through context. Also adds the pending state to ActionButtons.

Adds the default label which we support in other components to Picker's items.

Moves S2 Table cell focus rings so they render over the cell content.

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

…through context

rspbot · 2025-09-04T05:30:12Z

Build successful! 🎉

…o don't

rspbot · 2025-09-04T06:59:02Z

Build successful! 🎉

LFDanLu

Behavior looks good to me, will need some more time to double check the calculatePosition change (wish it wasn't so brittle)

packages/@react-aria/overlays/src/calculatePosition.ts

LFDanLu · 2025-09-04T23:31:05Z

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

+      if (key.startsWith('on')) {
+        props[key] = undefined;
+      }


what about onBlur/onFocus? Should those be removed?

o doh, i saw "focusProps" and assumed that's where that was being handled, you are correct

one question i did have here, is should i move this logic into useButton, it might be easier, but currently useButton doesn't know about pending since there are so many style dependent and dom structure requirements, so it only exists in higher levels

hm, is this mainly a concern about how the spinner may be rendered relative to the button and/or if there is a spinner at all? Not quite sure I fully understand the style/dom structure dependencies here

essentially there are different ways you can set things up
https://react-spectrum.adobe.com/react-aria/Button.html#accessibility

but the event behaviour should probably be the same, it'd just be weird to put that into the hooks i guess since it doesn't include a lot of the other choices

gotcha I think for now we punt on moving the logic into the hooks then

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

rspbot · 2025-09-04T23:53:19Z

Build successful! 🎉

rspbot · 2025-09-05T00:10:14Z

Build successful! 🎉

rspbot · 2025-09-05T00:17:18Z

Build successful! 🎉

rspbot · 2025-09-05T00:27:11Z

Build successful! 🎉

rspbot · 2025-09-05T00:30:46Z

Build successful! 🎉

LFDanLu · 2025-09-05T21:22:27Z

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -181,7 +181,7 @@ function getDelta(
  // Note that these values are with respect to the visual viewport (aka 0,0 is the top left of the viewport)
  let boundaryStartEdge = boundaryDimensions.scroll[AXIS[axis]] + padding;
  let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[AXIS[axis]] - padding;
-  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
+  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis];


I double checked this and found that it was tied to pinch zoom positioning: 3722d30. If you comment out what the startEdge/endEdge values here are, try opening the RAC Popover story outside the iframe, and open the popover after pinch zooming on Safari in such a way that the trigger is close to the edge of the left of the window you'll see that the startEdgeOffset calculation is incorrect (the boundary will return 12, but the start edge will return a value that is much larger). Each of the values here should return coordinate values transformed in such a way that a zoomed in window should have its origin at the top left.

As a result, opening a dropdown when the trigger is partially off screen won't do the following (aka preserve the visibility of the dropdown by keeping it in the bounds of the screen)

instead this happens, where the dropdown falls outside of its defined boundary

I see the original issue you alluded to in your description, but I think the calculated boundary edges are also incorrect in that story (they currently return 0 and 300 respectively but should be the left and right edge of the box with respect to the top left corner of the story).

In addition, the startEdgeOffset should just be equal to the offset in that case since that value is already in the proper coordinate system, but at the moment it is receiving a containerOffsetWithBoundary that has negative values that should instead be offsetting the value of boundaryDimensions (aka containerOffsetWithBoundary is representing how far offset the boundary element is with respect to the containing element aka the page). I think we'll need to

fix the boundaryStartEdge and boundaryEndEdge calcs here

Change it to be - containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]]; or update how containerOffsetWithBoundary is being calculated to return positive values (this one is probably more correct if we consider the top left corner to be the 0,0 origin and there for the offset should be positive instead of negative if the container is centered in the page)

Ahhh, thank you, I'll have a look on Monday

no worries, happy to sit with you and debug if you'd like as well, this stuff is tricky :/

rspbot · 2025-09-08T05:59:40Z

Build successful! 🎉

rspbot · 2025-09-08T05:59:42Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:ActionButton

 ActionButton {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
+  isPending?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/@react-spectrum/s2:ActionButtonProps

 ActionButtonProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
+  isPending?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

snowystinger added 11 commits September 4, 2025 14:30

fix: popover positioning

7edf43f

fix the position

feb6eca

add pending state to action buttons

79efc7b

support a default label slot in s2 picker

1fbe635

make it so cell focus ring is always on top of the content

356292a

actually disable interactions on buttons in pending state, including …

fb185e5

…through context

fix lint

7304bf8

fix more lint

7e1a5eb

fix ActionButton avatar visibility during pending

7a76308

fix lint for real

b2270bd

fix lint for real__FINAL

d3f1749

snowystinger added the ready for review label Sep 4, 2025

snowystinger added 4 commits September 4, 2025 16:27

SelectBoxGroup shouldn't lose focus ring for mouse like checkbox/radi…

336bfc8

…o don't

fix lint...

cdbe1da

fix lint and remove extra console log

959e4c5

fix tests by making them more realistic

9f9eba9

LFDanLu reviewed Sep 4, 2025

View reviewed changes

leave focus events on pending button alone

6170b84

snowystinger added 2 commits September 5, 2025 10:01

Add delays

0df0fbc

longer delay? and click body first?

3d005dc

snowystinger added 2 commits September 5, 2025 10:18

click body before on mobile as well

404caee

cleanup extraneous timeouts

c7b5d94

LFDanLu reviewed Sep 5, 2025

View reviewed changes

Merge branch 'main' into fix-various-bugs

fc7e685

fix: Popover positioning and various other bugs #8816

Are you sure you want to change the base?

fix: Popover positioning and various other bugs #8816

Conversation

snowystinger commented Sep 4, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Sep 4, 2025

Uh oh!

rspbot commented Sep 4, 2025

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Sep 5, 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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Sep 4, 2025

Uh oh!

rspbot commented Sep 5, 2025

Uh oh!

rspbot commented Sep 5, 2025

Uh oh!

rspbot commented Sep 5, 2025

Uh oh!

rspbot commented Sep 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 8, 2025

Uh oh!

rspbot commented Sep 8, 2025

@react-spectrum/s2

/@react-spectrum/s2:ActionButton

/@react-spectrum/s2:ActionButtonProps

Uh oh!

Uh oh!

snowystinger Sep 5, 2025 •

edited

Loading