fix(knowledge): keep connector mode switch focused across mode changes

Author: j15z

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.test.tsx

@@ -106,4 +106,26 @@ describe('connector input mode switch', () => {
     act(() => radio('Manual input').click())
     expect(radio('Selector').checked).toBe(true)
   })
+
+  it('keeps focus on the switch through a keyboard mode round trip', () => {
+    act(() => root.render(<Harness />))
+    const selector = radio('Selector')
+    const manual = radio('Manual input')
+
+    act(() => {
+      manual.focus()
+      manual.click()
+    })
+    expect(radio('Manual input')).toBe(manual)
+    expect(manual.checked).toBe(true)
+    expect(document.activeElement).toBe(manual)
+
+    act(() => {
+      selector.focus()
+      selector.click()
+    })
+    expect(radio('Selector')).toBe(selector)
+    expect(selector.checked).toBe(true)
+    expect(document.activeElement).toBe(selector)
+  })
 })

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-config-fields/connector-config-fields.tsx

@@ -64,7 +64,7 @@ export function ConnectorConfigFields({
 
         return (
           <ChipModalField
-            key={field.id}
+            key={hasCanonicalPair && canonicalId ? `canonical:${canonicalId}` : field.id}
             type='custom'
             title={
               /**
@@ -111,6 +111,7 @@ export function ConnectorConfigFields({
           >
             {field.type === 'selector' && field.selectorKey ? (
               <ConnectorSelectorField
+                key={field.id}
                 field={field as ConnectorConfigField & { selectorKey: SelectorKey }}
                 value={sourceConfig[field.id] ?? (field.multi ? [] : '')}
                 onChange={(value: ConfigFieldValue) => onFieldChange(field.id, value)}
@@ -122,6 +123,7 @@ export function ConnectorConfigFields({
               />
             ) : field.type === 'dropdown' && field.options ? (
               <ChipCombobox
+                key={field.id}
                 options={field.options.map((opt) => ({
                   label: opt.label,
                   value: opt.id,
@@ -136,6 +138,7 @@ export function ConnectorConfigFields({
               />
             ) : (
               <ChipInput
+                key={field.id}
                 value={
                   Array.isArray(sourceConfig[field.id])
                     ? (sourceConfig[field.id] as string[]).join(', ')