From bc8715860f47bd1f30415e40f748ca85ec288361 Mon Sep 17 00:00:00 2001
From: Andrew Nelson <andy@andyhub.com>
Date: Thu, 11 Apr 2024 09:17:52 -0700
Subject: [PATCH] fix: moved smooth-scroll application to useEffect (#2868)

---
 .../InPageNavigation/InPageNavigation.module.scss         | 2 +-
 src/components/InPageNavigation/InPageNavigation.test.tsx | 2 ++
 src/components/InPageNavigation/InPageNavigation.tsx      | 8 ++++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/InPageNavigation/InPageNavigation.module.scss b/src/components/InPageNavigation/InPageNavigation.module.scss
index 7e53786975..11378c2377 100644
--- a/src/components/InPageNavigation/InPageNavigation.module.scss
+++ b/src/components/InPageNavigation/InPageNavigation.module.scss
@@ -1,5 +1,5 @@
 @media not (prefers-reduced-motion) {
-  html {
+  .smooth-scroll {
     scroll-behavior: smooth;
   }
 }
diff --git a/src/components/InPageNavigation/InPageNavigation.test.tsx b/src/components/InPageNavigation/InPageNavigation.test.tsx
index 3741b7f63d..1b5f8ef2f1 100644
--- a/src/components/InPageNavigation/InPageNavigation.test.tsx
+++ b/src/components/InPageNavigation/InPageNavigation.test.tsx
@@ -4,6 +4,7 @@ import { userEvent } from '@testing-library/user-event'
 import { InPageNavigation } from './InPageNavigation'
 import { HeadingLevel } from '../../types/headingLevel'
 import { CONTENT } from './content'
+import styles from './InPageNavigation.module.scss'
 
 describe('InPageNavigation component', () => {
   const props = {
@@ -50,6 +51,7 @@ describe('InPageNavigation component', () => {
       name: 'On this page',
     })
     expect(heading).toBeInTheDocument()
+    expect(document.querySelector('html')).toHaveClass(styles['smooth-scroll'])
   })
 
   it('sets the heading and title', () => {
diff --git a/src/components/InPageNavigation/InPageNavigation.tsx b/src/components/InPageNavigation/InPageNavigation.tsx
index 2309789865..2bec65c999 100644
--- a/src/components/InPageNavigation/InPageNavigation.tsx
+++ b/src/components/InPageNavigation/InPageNavigation.tsx
@@ -29,7 +29,7 @@ export const InPageNavigation = ({
   ...divProps
 }: InPageNavigationProps &
   Omit<JSX.IntrinsicElements['div'], 'content'>): React.ReactElement => {
-  const classes = classnames('usa-in-page-nav', styles.target, className)
+  const asideClasses = classnames('usa-in-page-nav', styles.target, className)
   const { className: navClassName, ...remainingNavProps } = navProps || {}
   const navClasses = classnames('usa-in-page-nav__nav', navClassName)
   const { className: mainClassName, ...remainingMainProps } = mainProps || {}
@@ -57,12 +57,16 @@ export const InPageNavigation = ({
   const observer = new IntersectionObserver(handleIntersection, observerOptions)
   useEffect(() => {
     document.querySelectorAll('h2,h3').forEach((h) => observer.observe(h))
+    document.querySelector('html')?.classList.add(styles['smooth-scroll'])
+    return () => {
+      document.querySelector('html')?.classList.remove(styles['smooth-scroll'])
+    }
   })
 
   return (
     <div className="usa-in-page-nav-container" {...divProps}>
       <aside
-        className={classes}
+        className={asideClasses}
         aria-label={title}
         data-testid="InPageNavigation">
         <nav className={navClasses} {...remainingNavProps}>