From 2e272a63d25a5225e2c253cf2b5b8cecefaa6d80 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 31 Mar 2021 12:33:57 -0700
Subject: [PATCH] fix: remove the use of detail as this is a synthetic event
 value and will not be compatible with React 17 (#4515)

# Description

<!--- Describe your changes. -->
Removed the check using `detail` and resolve whether a click is a single or double click using only `setTimeout`.

## Motivation & context

<!--- What problem does this change solve? -->
<!--- Provide a link if you are addressing an open issue. -->
The use of the synthetic events `detail` would occasionally result in console logs being generated from React. Due to this also being removed in React 17 the double click detection is remediated to work solely from `setTimeout`.

## Issue type checklist

<!--- What type of change are you submitting? Put an x in the box that applies: -->

- [ ] **Chore**: A change that does not impact distributed packages.
- [x] **Bug fix**: A change that fixes an issue, link to the issue above.
- [ ] **New feature**: A change that adds functionality.

**Is this a breaking change?**
- [ ] This change causes current functionality to break.

<!--- If yes, describe the impact. -->

**Adding or modifying component(s) in `@microsoft/fast-components` checklist**

<!-- Do your changes add or modify components in the @microsoft/fast-components package? Put an x in the box that applies: -->

- [ ] I have added a new component
- [ ] I have modified an existing component
- [ ] I have updated the [definition file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition)
- [ ] I have updated the [configuration file](https://github.com/Microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration)

## Process & policy checklist

<!--- Review the list and check the boxes that apply. -->

- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

<!---
Formatting guidelines:

Accepted peer review title format:
<type>: <description>

Example titles:
    chore: add unit tests for all components
    feat: add a border radius to button
    fix: update design system to use 3px border radius

    <type> is required to be one of the following:

        - chore: A change that does not impact distributed packages.
        - fix: A change which fixes an issue.
        - feat: A that adds functionality.

    <description> is required for the CHANGELOG and speaks to what the user gets from this PR:

        - Be concise.
        - Use all lowercase characters.
        - Use imperative, present tense (e.g. `add` not `adds`.)
        - Do not end your description with a period.
        - Avoid redundant words.

For additional information regarding working on FAST, check out our documentation site:
https://www.fast.design/docs/community/contributor-guide
-->
---
 .../src/navigation/navigation.tsx             | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/tooling/fast-tooling-react/src/navigation/navigation.tsx b/packages/tooling/fast-tooling-react/src/navigation/navigation.tsx
index fb343420f6b..bab1f91d128 100644
--- a/packages/tooling/fast-tooling-react/src/navigation/navigation.tsx
+++ b/packages/tooling/fast-tooling-react/src/navigation/navigation.tsx
@@ -596,21 +596,27 @@ class Navigation extends Foundation<
         navigationConfigId: string
     ): ((event: React.MouseEvent<HTMLElement>) => void) => {
         let timer;
+        let timesClicked = 0;
 
         return (event: React.MouseEvent<HTMLElement>): void => {
             clearTimeout(timer);
+            timesClicked += 1;
 
-            if (event.detail === 1) {
-                timer = setTimeout(
+            setTimeout(() => {
+                if (timesClicked === 1) {
                     this.handleNavigationItemSingleClick(
                         dictionaryId,
                         navigationConfigId
-                    ),
-                    200
-                );
-            } else if (event.detail === 2) {
-                this.handleNavigationItemDoubleClick(dictionaryId, navigationConfigId)();
-            }
+                    );
+                } else if (timesClicked === 2) {
+                    this.handleNavigationItemDoubleClick(
+                        dictionaryId,
+                        navigationConfigId
+                    );
+                }
+
+                timesClicked = 0;
+            }, 200);
         };
     };
 
@@ -620,10 +626,8 @@ class Navigation extends Foundation<
     private handleNavigationItemSingleClick = (
         dictionaryId: string,
         navigationConfigId: string
-    ): (() => void) => {
-        return (): void => {
-            this.triggerNavigationUpdate(dictionaryId, navigationConfigId);
-        };
+    ): void => {
+        this.triggerNavigationUpdate(dictionaryId, navigationConfigId);
     };
 
     /**
@@ -632,12 +636,10 @@ class Navigation extends Foundation<
     private handleNavigationItemDoubleClick = (
         dictionaryId: string,
         navigationConfigId: string
-    ): (() => void) => {
-        return (): void => {
-            if (this.isEditable(dictionaryId, navigationConfigId)) {
-                this.triggerNavigationEdit();
-            }
-        };
+    ): void => {
+        if (this.isEditable(dictionaryId, navigationConfigId)) {
+            this.triggerNavigationEdit();
+        }
     };
 
     /**