From ff1df36f06fcdb7d8d4819947ab0d69cb3d659fe Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:39:45 -0500
Subject: [PATCH] fix(protocol-designer): fix scroll on SelectPipettes screen
 (#16983)

Reverts overflow on SelectPipettes screen to `OVERFLOW_SCROLL`. Also,
adds autoscroll to bottom to reveal tiprack selection if obscured.
---
 .../CreateNewProtocolWizard/SelectPipettes.tsx  | 17 ++++++++++++++++-
 .../__tests__/SelectPipettes.test.tsx           |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
index a5c0e8b5ab4..72cc6338526 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { useDispatch, useSelector } from 'react-redux'
@@ -91,6 +91,16 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     setPipetteVolume(null)
   }
 
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handleScrollToBottom = (): void => {
+    if (ref.current != null) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }
+  }
   //  initialize pipette name once all fields are filled out
   useEffect(() => {
     if (
@@ -106,6 +116,10 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     }
   }, [pipetteType, pipetteGen, pipetteVolume, selectedPipetteName])
 
+  useEffect(() => {
+    handleScrollToBottom()
+  }, [pipetteType, pipetteVolume, pipetteGen])
+
   const noPipette =
     (pipettesByMount.left.pipetteName == null ||
       pipettesByMount.left.tiprackDefURI == null) &&
@@ -187,6 +201,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
               flexDirection={DIRECTION_COLUMN}
               overflowY={OVERFLOW_AUTO}
               gridGap={SPACING.spacing32}
+              ref={ref}
             >
               <Flex
                 flexDirection={DIRECTION_COLUMN}
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
index 3dec8676ebf..67f5588d4ec 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx
@@ -21,6 +21,7 @@ vi.mock('../../../organisms')
 vi.mock('../../../labware-defs/actions')
 vi.mock('../utils')
 const mockLocation = vi.fn()
+window.HTMLElement.prototype.scrollIntoView = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
   const actual = await importOriginal<NavigateFunction>()