From 72b80985453522b114693706f9f6c8c6047b7b6f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 20 Aug 2024 14:50:48 -0700
Subject: [PATCH] Fix buttons in S2 dialogs stuck in hover state (#6916)

Co-authored-by: Daniel Lu <dl1644@gmail.com>
---
 packages/@react-spectrum/s2/src/Dialog.tsx | 209 +++++++++++----------
 1 file changed, 105 insertions(+), 104 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index 5f0f206b304..2e61f88e184 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {PopoverProps as AriaPopoverProps, composeRenderProps, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
+import {PopoverProps as AriaPopoverProps, composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ButtonGroupContext} from './ButtonGroup';
 import {CloseButton} from './CloseButton';
 import {ContentContext, FooterContext, HeaderContext, HeadingContext, ImageContext} from './Content';
@@ -187,125 +187,126 @@ function DialogInner(props: DialogProps & DialogContextValue & {dialogRef: RefOb
       ref={props.dialogRef}
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + dialogInner}>
-      {composeRenderProps(props.children, (children, {close}) =>
-          // Render the children multiple times inside the wrappers we need to implement the layout.
-          // Each instance hides certain children so that they are all rendered in the correct locations.
-          (<>
-            {/* Hero image */}
-            <Provider
-              values={[
-                [ImageContext, {className: image}],
-                [HeadingContext, {isHidden: true}],
-                [HeaderContext, {isHidden: true}],
-                [ContentContext, {isHidden: true}],
-                [FooterContext, {isHidden: true}],
-                [ButtonGroupContext, {isHidden: true}]
-              ]}>
-              {children}
-            </Provider>
-            {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}
+      {composeRenderProps(props.children, (children, {close}) => (
+        // Render the children multiple times inside the wrappers we need to implement the layout.
+        // Each instance hides certain children so that they are all rendered in the correct locations.
+        // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
+        <OverlayTriggerStateContext.Provider value={null}>
+          {/* Hero image */}
+          <Provider
+            values={[
+              [ImageContext, {className: image}],
+              [HeadingContext, {isHidden: true}],
+              [HeaderContext, {isHidden: true}],
+              [ContentContext, {isHidden: true}],
+              [FooterContext, {isHidden: true}],
+              [ButtonGroupContext, {isHidden: true}]
+            ]}>
+            {children}
+          </Provider>
+          {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}
+          <div
+            className={style({
+              // Wrapper that creates the margin for the dismiss button.
+              display: 'flex',
+              alignItems: 'start',
+              columnGap: 12,
+              marginStart: {
+                default: 32
+              },
+              marginEnd: {
+                default: 32,
+                isDismissable: 12
+              },
+              marginTop: {
+                default: 12 // margin to dismiss button
+              }
+            })({isDismissable: props.isDismissable, type: props.type})}>
             <div
               className={style({
-                // Wrapper that creates the margin for the dismiss button.
+                // Wrapper for heading, header, and button group.
+                // This swaps orientation from horizontal to vertical at small screen sizes.
                 display: 'flex',
-                alignItems: 'start',
-                columnGap: 12,
-                marginStart: {
-                  default: 32
-                },
-                marginEnd: {
-                  default: 32,
-                  isDismissable: 12
-                },
+                flexGrow: 1,
                 marginTop: {
-                  default: 12 // margin to dismiss button
-                }
-              })({isDismissable: props.isDismissable, type: props.type})}>
-              <div
-                className={style({
-                  // Wrapper for heading, header, and button group.
-                  // This swaps orientation from horizontal to vertical at small screen sizes.
-                  display: 'flex',
-                  flexGrow: 1,
-                  marginTop: {
-                    default: 20, // 32 - 12 (handled above)
-                    ':empty': 0
-                  },
-                  marginBottom: {
-                    default: 16,
-                    ':empty': 0
-                  },
-                  columnGap: 24,
-                  rowGap: 8,
-                  flexDirection: {
-                    default: 'column',
-                    sm: 'row'
-                  },
-                  alignItems: {
-                    default: 'start',
-                    sm: 'center'
-                  }
-                })}>
-                <Provider
-                  values={[
-                    [ImageContext, {hidden: true}],
-                    [HeadingContext, {styles: heading}],
-                    [HeaderContext, {styles: header}],
-                    [ContentContext, {isHidden: true}],
-                    [FooterContext, {isHidden: true}],
-                    [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'top'}]
-                  ]}>
-                  {children}
-                </Provider>
-              </div>
-              {props.isDismissable &&
-              <CloseButton aria-label={stringFormatter.format('dialog.dismiss')} onPress={close} styles={style({marginBottom: 12})} />
-            }
-            </div>
-            {/* Main content */}
-            <Provider
-              values={[
-                [ImageContext, {hidden: true}],
-                [HeadingContext, {isHidden: true}],
-                [HeaderContext, {isHidden: true}],
-                [ContentContext, {styles: content({type: props.type})}],
-                [FooterContext, {isHidden: true}],
-                [ButtonGroupContext, {isHidden: true}]
-              ]}>
-              {children}
-            </Provider>
-            {/* Footer and button group */}
-            <div
-              className={style({
-                display: 'flex',
-                paddingX: {
-                  default: 32
-                },
-                paddingBottom: {
-                  default: 32
+                  default: 20, // 32 - 12 (handled above)
+                  ':empty': 0
                 },
-                paddingTop: {
-                  default: 32,
+                marginBottom: {
+                  default: 16,
                   ':empty': 0
                 },
-                gap: 24,
-                alignItems: 'center',
-                flexWrap: 'wrap'
+                columnGap: 24,
+                rowGap: 8,
+                flexDirection: {
+                  default: 'column',
+                  sm: 'row'
+                },
+                alignItems: {
+                  default: 'start',
+                  sm: 'center'
+                }
               })}>
               <Provider
                 values={[
                   [ImageContext, {hidden: true}],
-                  [HeadingContext, {isHidden: true}],
-                  [HeaderContext, {isHidden: true}],
+                  [HeadingContext, {styles: heading}],
+                  [HeaderContext, {styles: header}],
                   [ContentContext, {isHidden: true}],
-                  [FooterContext, {styles: footer}],
-                  [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+                  [FooterContext, {isHidden: true}],
+                  [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'top'}]
                 ]}>
                 {children}
               </Provider>
             </div>
-          </>)
-        )}
+            {props.isDismissable &&
+            <CloseButton aria-label={stringFormatter.format('dialog.dismiss')} onPress={close} styles={style({marginBottom: 12})} />
+          }
+          </div>
+          {/* Main content */}
+          <Provider
+            values={[
+              [ImageContext, {hidden: true}],
+              [HeadingContext, {isHidden: true}],
+              [HeaderContext, {isHidden: true}],
+              [ContentContext, {styles: content({type: props.type})}],
+              [FooterContext, {isHidden: true}],
+              [ButtonGroupContext, {isHidden: true}]
+            ]}>
+            {children}
+          </Provider>
+          {/* Footer and button group */}
+          <div
+            className={style({
+              display: 'flex',
+              paddingX: {
+                default: 32
+              },
+              paddingBottom: {
+                default: 32
+              },
+              paddingTop: {
+                default: 32,
+                ':empty': 0
+              },
+              gap: 24,
+              alignItems: 'center',
+              flexWrap: 'wrap'
+            })}>
+            <Provider
+              values={[
+                [ImageContext, {hidden: true}],
+                [HeadingContext, {isHidden: true}],
+                [HeaderContext, {isHidden: true}],
+                [ContentContext, {isHidden: true}],
+                [FooterContext, {styles: footer}],
+                [ButtonGroupContext, {isHidden: buttonGroupPlacement !== 'bottom', styles: buttonGroup, align: 'end'}]
+              ]}>
+              {children}
+            </Provider>
+          </div>
+        </OverlayTriggerStateContext.Provider>
+      ))}
     </RACDialog>
   );
 }