Skip to content

Commit ee5f623

Browse files
waleedlatif1claude
andcommitted
fix(tag-dropdown): performance improvements and scroll bug fixes
- Add flatTagIndexMap for O(1) tag lookups (replaces O(n²) findIndex calls) - Memoize caret position calculation to avoid DOM manipulation on every render - Use refs for inputValue/cursorPosition to keep handleTagSelect callback stable - Change itemRefs from index-based to tag-based keys to prevent stale refs - Fix scroll jump in nested folders by removing scroll reset from registerFolder - Add onFolderEnter callback for scroll reset when entering folder via keyboard - Disable keyboard navigation wrap-around at boundaries - Simplify selection reset to single effect on flatTagList.length change Also: - Add safeCompare utility for timing-safe string comparison - Refactor webhook signature validation to use safeCompare Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent ded36d3 commit ee5f623

File tree

5 files changed

+120
-187
lines changed

5 files changed

+120
-187
lines changed

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ interface KeyboardNavigationHandlerProps {
1414
flatTagList: Array<{ tag: string; group?: BlockTagGroup }>
1515
nestedBlockTagGroups: NestedBlockTagGroup[]
1616
handleTagSelect: (tag: string, group?: BlockTagGroup) => void
17+
/** Called when entering a folder from root level via keyboard navigation */
18+
onFolderEnter?: () => void
1719
}
1820

1921
/**
@@ -107,6 +109,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
107109
flatTagList,
108110
nestedBlockTagGroups,
109111
handleTagSelect,
112+
onFolderEnter,
110113
}) => {
111114
const { openFolder, closeFolder, isInFolder, currentFolder, setKeyboardNav } = usePopoverContext()
112115
const nestedNav = useNestedNavigation()
@@ -251,7 +254,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
251254
} else if (currentVisibleIndex < visibleIndices.length - 1) {
252255
newIndex = visibleIndices[currentVisibleIndex + 1]
253256
} else {
254-
newIndex = visibleIndices[0]
257+
newIndex = selectedIndex
255258
}
256259
setSelectedIndex(newIndex)
257260
scrollIntoView()
@@ -269,7 +272,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
269272
} else if (currentVisibleIndex > 0) {
270273
newIndex = visibleIndices[currentVisibleIndex - 1]
271274
} else {
272-
newIndex = visibleIndices[visibleIndices.length - 1]
275+
newIndex = selectedIndex
273276
}
274277
setSelectedIndex(newIndex)
275278
scrollIntoView()
@@ -295,6 +298,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
295298
currentFolderInfo.parentTag,
296299
currentFolderInfo.group
297300
)
301+
onFolderEnter?.()
298302
}
299303
}
300304
break
@@ -346,6 +350,7 @@ export const KeyboardNavigationHandler: React.FC<KeyboardNavigationHandlerProps>
346350
handleTagSelect,
347351
nestedNav,
348352
setKeyboardNav,
353+
onFolderEnter,
349354
])
350355

351356
return null

0 commit comments

Comments
 (0)