HTTP Request Node Key-Value Editor#

The key-value editor is the UI component used in Dify's HTTP Request workflow node to edit params, headers, and form-data body fields as interactive rows of key/value pairs. It supports variable references via a Lexical-based rich-text input and optionally a file type selector for form-data body entries.

Component Structure#

The parent list component renders KeyValueItem for each entry. KeyValueItem receives instanceId, payload, onChange, onRemove, isLastItem, and onAdd 1. Each row's key and value cells are rendered via InputItem, which passes the instanceId downstream as http-key-{instanceId} / http-value-{instanceId} to the Lexical editor so it can be stably keyed .

When isSupportFile is true, an additional type dropdown (text / file) is shown between the key and value cells. Selecting file replaces the value InputItem with a VarReferencePicker 3.

State Model: String Round-Trip#

use-key-value-list holds the list in local React state but the authoritative store is a newline-joined string (key:value\nkey:value). Every mutation calls stringifyList and bubbles the string up via onChange 4. On the next render, a microtask useEffect re-parses the string back into a list and replaces state if the serialized forms differ 5.

This round-trip model is the root cause of several compound bugs described below.

Known Bugs and Fixes#

1. Row remounting / lost keystrokes (open – PR #39552)#

Issue: Typing into the trailing (new) row destroyed the row — the character was lost and any key already entered disappeared. Pasting worked; typing did not.

Root cause: Two compounding issues in use-key-value-list.ts 6:

• The microtask useEffect re-derived the list from the string on every change and reassigned every row's id, remounting the Lexical editor mid-keystroke and dropping the typed character.
• addItem closed over a stale list, so an onChange immediately followed by onAdd let the add overwrite the just-typed value.

Fix (PR #39552): Add a listRef mirror so addItem no longer reads stale state. In the reconciliation useEffect, preserve existing row ids positionally (prev[index]?.id || item.id) so that only genuinely new rows receive a fresh id 6.

2. Colon truncation in values (fixed – PRs #38861, #39165)#

Issue: Form-data values containing colons (e.g., URLs like https://example.com:8080/path, Bearer tokens abc:def) were silently truncated to the segment before the first colon on node reload. The truncated value was then persisted, corrupting the workflow 7.

Root cause: transformToBodyPayload in utils.ts split each line with const [key, value] = item.split(':'), keeping only the first segment. use-key-value-list.ts had the same flaw.

Fix: Both sites now use const [key, ...others] = item.split(':') with others.join(':') to reconstruct the full value 7 8. PR #39165 also added splitFirst helper and regression tests in use-key-value-list.test.ts and utils.spec.ts.

3. Unintended row append on empty-value click (fixed – PR #35051)#

Issue: Clicking anywhere in an empty value cell triggered onAdd(), appending a new row even though no content was entered.

Fix: handleValueContainerClick now only calls onAdd() when isLastItem && hasValuePayload — i.e., the row already has content 9 10. Similarly, handleChange calls onAdd() only when the value transitions from empty to non-empty on the last row 11.

4. Type dropdown component instability (fixed – PR #35304)#

Issue: The PortalSelect component used for the text/file type cell caused rendering and accessibility issues.

Fix: Replaced with the shared Select / SelectTrigger / SelectContent component family; added value={payload.type ?? 'text'} as a stable default to prevent undefined states 12 13.

Structural Limitation#

The newline-joined-string storage (key:value\n…) is a known architectural constraint. Among its consequences:

• Keys or values containing newlines cannot be represented.
• Every render cycle runs a full serialize → deserialize → compare cycle.
• Pressing Enter in the trailing row's key field still migrates the existing value into the newly-created row (documented as a follow-up in issue #39551) 6.

Changing this model requires migrating the node's persisted data format, which is explicitly out of scope for the incremental bug fixes above.

Key Source Files#

• Row component: item.tsx
• State hook: use-key-value-list.ts
• Body migration utility: web/app/components/workflow/nodes/http/utils.ts (see PRs #38861, #39165)
• Tests: web/app/components/workflow/nodes/http/__tests__/ (integration, utils, use-key-value-list)