fix: Shortcut helper firing when it shouldn't (#18864)

PostHog · Nov 27, 2023 · c5193a6 · c5193a6
1 parent 0582506
commit c5193a6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit.png
diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
@@ -1,4 +1,5 @@
 import { actions, afterMount, beforeUnmount, kea, path, reducers } from 'kea'
+import { shouldIgnoreInput } from 'lib/utils'
 
 import type { commandBarLogicType } from './commandBarLogicType'
 import { BarStatus } from './types'
@@ -34,6 +35,9 @@ export const commandBarLogic = kea<commandBarLogicType>([
     afterMount(({ actions, cache }) => {
         // register keyboard shortcuts
         cache.onKeyDown = (event: KeyboardEvent) => {
+            if (shouldIgnoreInput(event)) {
+                return
+            }
             if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
                 event.preventDefault()
                 if (event.shiftKey) {

diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -5,7 +5,7 @@ import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { range, sampleOne } from 'lib/utils'
+import { range, sampleOne, shouldIgnoreInput } from 'lib/utils'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 
 import { HedgehogAccessories } from './HedgehogAccessories'
@@ -32,15 +32,6 @@ const randomChoiceList: string[] = Object.keys(standardAnimations).reduce((acc:
     return [...acc, ...range(standardAnimations[key].randomChance || 0).map(() => key)]
 }, [])
 
-const shouldIgnoreInput = (e: KeyboardEvent): boolean => {
-    return (
-        ['input', 'textarea'].includes((e.target as HTMLElement).tagName.toLowerCase()) ||
-        (e.target as HTMLElement).isContentEditable ||
-        (e.target as HTMLElement).parentElement?.isContentEditable ||
-        false
-    )
-}
-
 export class HedgehogActor {
     animations = standardAnimations
     iterationCount = 0

diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
@@ -1553,3 +1553,12 @@ export function flattenObject(ob: Record<string, any>): Record<string, any> {
     }
     return toReturn
 }
+
+export const shouldIgnoreInput = (e: KeyboardEvent): boolean => {
+    return (
+        ['input', 'textarea'].includes((e.target as HTMLElement).tagName.toLowerCase()) ||
+        (e.target as HTMLElement).isContentEditable ||
+        (e.target as HTMLElement).parentElement?.isContentEditable ||
+        false
+    )
+}