From 96cc8bb33af064a62cfeff811bc90384d8b1e2c2 Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Tue, 18 Apr 2023 20:32:55 +0000
Subject: [PATCH 1/6] Adding example of focus bug

---
 src/TreeView/TreeView.features.stories.tsx | 154 +++++++++++++++++++++
 1 file changed, 154 insertions(+)

diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx
index aec221bd7ae..bd7fb83b67f 100644
--- a/src/TreeView/TreeView.features.stories.tsx
+++ b/src/TreeView/TreeView.features.stories.tsx
@@ -5,6 +5,7 @@ import Box from '../Box'
 import {Button} from '../Button'
 import Octicon from '../Octicon'
 import {SubTreeState, TreeView} from './TreeView'
+import TextInput from '../TextInput/TextInput'
 
 const meta: Meta = {
   title: 'Components/TreeView/Features',
@@ -23,6 +24,7 @@ const meta: Meta = {
 
 export const Files: Story = () => (
   <nav aria-label="Files">
+    <TextInput />
     <TreeView aria-label="Files">
       <TreeView.Item id="src" defaultExpanded>
         <TreeView.LeadingVisual>
@@ -54,6 +56,78 @@ export const Files: Story = () => (
                 </TreeView.LeadingVisual>
                 Button.test.tsx
               </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
             </TreeView.SubTree>
           </TreeView.Item>
           <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
@@ -64,6 +138,86 @@ export const Files: Story = () => (
           </TreeView.Item>
         </TreeView.SubTree>
       </TreeView.Item>
+      <TreeView.Item id="src2" defaultExpanded>
+        <TreeView.LeadingVisual>
+          <TreeView.DirectoryIcon />
+        </TreeView.LeadingVisual>
+        src
+        <TreeView.SubTree>
+          <TreeView.Item id="src/Avatar.tsx2">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            Avatar.tsx
+          </TreeView.Item>
+          <TreeView.Item id="src/Button2">
+            <TreeView.LeadingVisual>
+              <TreeView.DirectoryIcon />
+            </TreeView.LeadingVisual>
+            Button
+            <TreeView.SubTree>
+              <TreeView.Item id="src/Button/Button.tsx2">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx2">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx2">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            ReallyLongFileNameThatShouldBeTruncated.tsx
+          </TreeView.Item>
+        </TreeView.SubTree>
+      </TreeView.Item>
+      <TreeView.Item id="src3">
+        <TreeView.LeadingVisual>
+          <TreeView.DirectoryIcon />
+        </TreeView.LeadingVisual>
+        src
+        <TreeView.SubTree>
+          <TreeView.Item id="src/Avatar.tsx3">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            Avatar.tsx
+          </TreeView.Item>
+          <TreeView.Item id="src/Button3">
+            <TreeView.LeadingVisual>
+              <TreeView.DirectoryIcon />
+            </TreeView.LeadingVisual>
+            Button
+            <TreeView.SubTree>
+              <TreeView.Item id="src/Button/Button.tsx3">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx3">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx3">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            ReallyLongFileNameThatShouldBeTruncated.tsx
+          </TreeView.Item>
+        </TreeView.SubTree>
+      </TreeView.Item>
       <TreeView.Item
         id="public"
         // eslint-disable-next-line no-console

From 0c7296c3f7e4486bd6ddd018a9c96d33b41aecb8 Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Thu, 18 May 2023 20:35:30 +0000
Subject: [PATCH 2/6] Not using focusInStrategy when clicking

---
 src/TreeView/TreeView.features.stories.tsx | 268 +++++++++------------
 src/TreeView/TreeView.test.tsx             |  37 +++
 src/TreeView/TreeView.tsx                  |  15 +-
 src/TreeView/useRovingTabIndex.ts          |  15 +-
 4 files changed, 175 insertions(+), 160 deletions(-)

diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx
index bd7fb83b67f..4458385287b 100644
--- a/src/TreeView/TreeView.features.stories.tsx
+++ b/src/TreeView/TreeView.features.stories.tsx
@@ -24,7 +24,6 @@ const meta: Meta = {
 
 export const Files: Story = () => (
   <nav aria-label="Files">
-    <TextInput />
     <TreeView aria-label="Files">
       <TreeView.Item id="src" defaultExpanded>
         <TreeView.LeadingVisual>
@@ -56,78 +55,6 @@ export const Files: Story = () => (
                 </TreeView.LeadingVisual>
                 Button.test.tsx
               </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
             </TreeView.SubTree>
           </TreeView.Item>
           <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
@@ -138,86 +65,6 @@ export const Files: Story = () => (
           </TreeView.Item>
         </TreeView.SubTree>
       </TreeView.Item>
-      <TreeView.Item id="src2" defaultExpanded>
-        <TreeView.LeadingVisual>
-          <TreeView.DirectoryIcon />
-        </TreeView.LeadingVisual>
-        src
-        <TreeView.SubTree>
-          <TreeView.Item id="src/Avatar.tsx2">
-            <TreeView.LeadingVisual>
-              <FileIcon />
-            </TreeView.LeadingVisual>
-            Avatar.tsx
-          </TreeView.Item>
-          <TreeView.Item id="src/Button2">
-            <TreeView.LeadingVisual>
-              <TreeView.DirectoryIcon />
-            </TreeView.LeadingVisual>
-            Button
-            <TreeView.SubTree>
-              <TreeView.Item id="src/Button/Button.tsx2">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx2">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-            </TreeView.SubTree>
-          </TreeView.Item>
-          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx2">
-            <TreeView.LeadingVisual>
-              <FileIcon />
-            </TreeView.LeadingVisual>
-            ReallyLongFileNameThatShouldBeTruncated.tsx
-          </TreeView.Item>
-        </TreeView.SubTree>
-      </TreeView.Item>
-      <TreeView.Item id="src3">
-        <TreeView.LeadingVisual>
-          <TreeView.DirectoryIcon />
-        </TreeView.LeadingVisual>
-        src
-        <TreeView.SubTree>
-          <TreeView.Item id="src/Avatar.tsx3">
-            <TreeView.LeadingVisual>
-              <FileIcon />
-            </TreeView.LeadingVisual>
-            Avatar.tsx
-          </TreeView.Item>
-          <TreeView.Item id="src/Button3">
-            <TreeView.LeadingVisual>
-              <TreeView.DirectoryIcon />
-            </TreeView.LeadingVisual>
-            Button
-            <TreeView.SubTree>
-              <TreeView.Item id="src/Button/Button.tsx3">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.tsx
-              </TreeView.Item>
-              <TreeView.Item id="src/Button/Button.test.tsx3">
-                <TreeView.LeadingVisual>
-                  <FileIcon />
-                </TreeView.LeadingVisual>
-                Button.test.tsx
-              </TreeView.Item>
-            </TreeView.SubTree>
-          </TreeView.Item>
-          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx3">
-            <TreeView.LeadingVisual>
-              <FileIcon />
-            </TreeView.LeadingVisual>
-            ReallyLongFileNameThatShouldBeTruncated.tsx
-          </TreeView.Item>
-        </TreeView.SubTree>
-      </TreeView.Item>
       <TreeView.Item
         id="public"
         // eslint-disable-next-line no-console
@@ -931,11 +778,118 @@ export const InitialFocus: Story = () => (
   <div>
     <Button>Focusable element before TreeView</Button>
     <TreeView aria-label="Test tree">
-      <TreeView.Item id="item-1">Item 1</TreeView.Item>
-      <TreeView.Item id="item-2" current>
-        Item 2
+      <TreeView.Item id="src" defaultExpanded>
+        <TreeView.LeadingVisual>
+          <TreeView.DirectoryIcon />
+        </TreeView.LeadingVisual>
+        src
+        <TreeView.SubTree>
+          <TreeView.Item id="src/Avatar.tsx">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            Avatar.tsx
+          </TreeView.Item>
+          <TreeView.Item id="src/Button" defaultExpanded>
+            <TreeView.LeadingVisual>
+              <TreeView.DirectoryIcon />
+            </TreeView.LeadingVisual>
+            Button
+            <TreeView.SubTree>
+              <TreeView.Item id="src/Button/Button.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button2.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button2.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button2.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button2.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button3.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button3.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button3.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button3.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button4.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button4.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button4.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button4.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button5.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button5.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button5.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button5.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button6.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button6.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button6.test.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button6.test.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button7.tsx">
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button7.tsx
+              </TreeView.Item>
+              <TreeView.Item id="src/Button/Button7.test.tsx" current>
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                Button7.test.tsx
+              </TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            ReallyLongFileNameThatShouldBeTruncated.tsx
+          </TreeView.Item>
+        </TreeView.SubTree>
       </TreeView.Item>
-      <TreeView.Item id="item-3">Item 3</TreeView.Item>
     </TreeView>
     <Button>Focusable element after TreeView</Button>
   </div>
diff --git a/src/TreeView/TreeView.test.tsx b/src/TreeView/TreeView.test.tsx
index 2a069a0e79a..a13c8c0277e 100644
--- a/src/TreeView/TreeView.test.tsx
+++ b/src/TreeView/TreeView.test.tsx
@@ -247,6 +247,43 @@ describe('Markup', () => {
     const item2 = getByRole('treeitem', {name: /Item 2/})
     expect(item2).toHaveFocus()
   })
+
+  it('should toggle when receiving focus from chevron click', async () => {
+    const user = userEvent.setup({delay: null})
+    const {getByRole} = renderWithTheme(
+      <div>
+        <button>Focusable element</button>
+        <TreeView aria-label="Test tree">
+          <TreeView.Item id="item-1">
+            Item 1
+            <TreeView.SubTree>
+              <TreeView.Item id="subitem-1">SubItem 1</TreeView.Item>
+              <TreeView.Item id="subitem-2">SubItem 2</TreeView.Item>
+              <TreeView.Item id="subitem-3">SubItem 3</TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.Item id="item-2" current>
+            Item 2
+          </TreeView.Item>
+          <TreeView.Item id="item-3">Item 3</TreeView.Item>
+        </TreeView>
+      </div>,
+    )
+
+    // Focus button
+    const button = getByRole('button', {name: /Focusable element/})
+    await user.click(button)
+    expect(button).toHaveFocus()
+
+    // Move focus to tree
+    const item1 = getByRole('treeitem', {name: /Item 1/})
+    const toggle = item1.querySelector('.PRIVATE_TreeView-item-toggle')
+    await user.click(toggle!)
+
+    // Focus should be on current treeitem
+    const subItem1 = getByRole('treeitem', {name: /SubItem 1/})
+    expect(subItem1).toBeInTheDocument()
+  })
 })
 
 describe('Keyboard interactions', () => {
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index 15c36120e31..fe4185de621 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -5,7 +5,7 @@ import {
   FileDirectoryOpenFillIcon,
 } from '@primer/octicons-react'
 import classnames from 'classnames'
-import React from 'react'
+import React, {useCallback, useEffect} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
 import Spinner from '../Spinner'
@@ -256,12 +256,21 @@ const Root: React.FC<TreeViewProps> = ({
   flat,
 }) => {
   const containerRef = React.useRef<HTMLUListElement>(null)
+  const mouseDownRef = React.useRef<boolean>(false)
   const [ariaLiveMessage, setAriaLiveMessage] = React.useState('')
   const announceUpdate = React.useCallback((message: string) => {
     setAriaLiveMessage(message)
   }, [])
 
-  useRovingTabIndex({containerRef})
+  const clickHandler = useCallback(() => {
+    mouseDownRef.current = false
+  }, [])
+
+  const mouseDownHandler = useCallback(() => {
+    mouseDownRef.current = true
+  }, [])
+
+  useRovingTabIndex({containerRef, mouseDownRef})
   useTypeahead({
     containerRef,
     onFocusChange: element => {
@@ -294,6 +303,8 @@ const Root: React.FC<TreeViewProps> = ({
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
           data-omit-spacer={flat}
+          onClick={clickHandler}
+          onMouseDown={mouseDownHandler}
         >
           {children}
         </UlBox>
diff --git a/src/TreeView/useRovingTabIndex.ts b/src/TreeView/useRovingTabIndex.ts
index 6959e037b41..99cc4b9f319 100644
--- a/src/TreeView/useRovingTabIndex.ts
+++ b/src/TreeView/useRovingTabIndex.ts
@@ -2,7 +2,13 @@ import React from 'react'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {getScrollContainer} from '../utils/scroll'
 
-export function useRovingTabIndex({containerRef}: {containerRef: React.RefObject<HTMLElement>}) {
+export function useRovingTabIndex({
+  containerRef,
+  mouseDownRef,
+}: {
+  containerRef: React.RefObject<HTMLElement>
+  mouseDownRef: React.RefObject<boolean>
+}) {
   // TODO: Initialize focus to the aria-current item if it exists
   useFocusZone({
     containerRef,
@@ -19,6 +25,13 @@ export function useRovingTabIndex({containerRef}: {containerRef: React.RefObject
       return getNextFocusableElement(from, event) ?? from
     },
     focusInStrategy: () => {
+      // Don't try to execute the focusInStrategy if focus is coming from a click.
+      // The clicked row will receive focus correctly by default.
+      // If a chevron is clicked, setting the focus through the focuszone will prevent its toggle.
+      if (mouseDownRef.current) {
+        return undefined
+      }
+
       const currentItem = containerRef.current?.querySelector('[aria-current]')
       const firstItem = containerRef.current?.querySelector('[role="treeitem"]')
 

From 4c9b652568a5ee85301f73257f18717774bfab6a Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Thu, 18 May 2023 20:56:43 +0000
Subject: [PATCH 3/6] Clearing mousedown state correctly

---
 src/TreeView/TreeView.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index fe4185de621..96d81e746d0 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -262,14 +262,21 @@ const Root: React.FC<TreeViewProps> = ({
     setAriaLiveMessage(message)
   }, [])
 
-  const clickHandler = useCallback(() => {
-    mouseDownRef.current = false
-  }, [])
-
   const mouseDownHandler = useCallback(() => {
     mouseDownRef.current = true
   }, [])
 
+  const mouseUpHandler = useCallback(() => {
+    mouseDownRef.current = false
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('mouseup', mouseUpHandler)
+    return () => {
+      document.removeEventListener('mouseup', mouseUpHandler)
+    }
+  })
+
   useRovingTabIndex({containerRef, mouseDownRef})
   useTypeahead({
     containerRef,
@@ -303,7 +310,6 @@ const Root: React.FC<TreeViewProps> = ({
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
           data-omit-spacer={flat}
-          onClick={clickHandler}
           onMouseDown={mouseDownHandler}
         >
           {children}

From 6f16218e161b4638ea6599b95c7b1b27bb9d8931 Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Thu, 18 May 2023 21:02:08 +0000
Subject: [PATCH 4/6] Adding changeset

---
 .changeset/khaki-walls-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/khaki-walls-applaud.md

diff --git a/.changeset/khaki-walls-applaud.md b/.changeset/khaki-walls-applaud.md
new file mode 100644
index 00000000000..71ef8ece8b7
--- /dev/null
+++ b/.changeset/khaki-walls-applaud.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixing toggle bug on Treeview when it initially receives focus

From d9324660348a314e586ba43f1b2501a1c10099ec Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Thu, 18 May 2023 21:05:31 +0000
Subject: [PATCH 5/6] Removing unused import

---
 src/TreeView/TreeView.features.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx
index 4458385287b..25316a10a6f 100644
--- a/src/TreeView/TreeView.features.stories.tsx
+++ b/src/TreeView/TreeView.features.stories.tsx
@@ -5,7 +5,6 @@ import Box from '../Box'
 import {Button} from '../Button'
 import Octicon from '../Octicon'
 import {SubTreeState, TreeView} from './TreeView'
-import TextInput from '../TextInput/TextInput'
 
 const meta: Meta = {
   title: 'Components/TreeView/Features',

From dce11265baa2a871c162f80b4577dce9d92f2962 Mon Sep 17 00:00:00 2001
From: Joshua Rush <jdrush89@gmail.com>
Date: Mon, 22 May 2023 14:03:38 +0000
Subject: [PATCH 6/6] Moving mouseup handler

---
 src/TreeView/TreeView.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index 96d81e746d0..0819c335c56 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -262,20 +262,19 @@ const Root: React.FC<TreeViewProps> = ({
     setAriaLiveMessage(message)
   }, [])
 
-  const mouseDownHandler = useCallback(() => {
+  const onMouseDown = useCallback(() => {
     mouseDownRef.current = true
   }, [])
 
-  const mouseUpHandler = useCallback(() => {
-    mouseDownRef.current = false
-  }, [])
-
   useEffect(() => {
-    document.addEventListener('mouseup', mouseUpHandler)
+    function onMouseUp() {
+      mouseDownRef.current = false
+    }
+    document.addEventListener('mouseup', onMouseUp)
     return () => {
-      document.removeEventListener('mouseup', mouseUpHandler)
+      document.removeEventListener('mouseup', onMouseUp)
     }
-  })
+  }, [])
 
   useRovingTabIndex({containerRef, mouseDownRef})
   useTypeahead({
@@ -310,7 +309,7 @@ const Root: React.FC<TreeViewProps> = ({
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
           data-omit-spacer={flat}
-          onMouseDown={mouseDownHandler}
+          onMouseDown={onMouseDown}
         >
           {children}
         </UlBox>