Fix Change Method Signature editable cells not rendering typed text (#4417)

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4

[wenytang-ms]

Problem

On Change Method Signature, editing a parameter Type (or Name / Default value, or an exception Type) shows nothing while typing, and on OK the typed text is appended to the original value instead of replacing it (e.g. String + int -> Stringint).

Root cause: these cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkitvscode-data-grid-cell. That component's shadow root is only <template shadowrootmode=""open""><slot></slot></template>, so the text node typed onto the host sits outside any slot and is never rendered. On commit the value was read via outerText, which concatenates the original type with the stray text node — explaining both the invisible-while-typing and append-on-commit behavior. Reproduces with --disable-gpu (not a compositing issue).

Fix

Render a real <input> as slotted content of the cell while editing, and read its .value on commit instead of outerText:

• Typed text is now visibly rendered.
• Commit uses correct replace semantics.
• focus()/select() moved into the setState callback (the input mounts after re-render); entering edit selects the existing text for quick replacement.
• Removed the now-obsolete contentEditable DOM-reset on cancel — component state is the single source of truth.

This is a minimal, dependency-free fix scoped to the editable cells. Fully migrating the dialog off the archived toolkit (it is the only webview still using it) can be tracked separately.

Testing

• npx tsc --noEmit — passes
• eslint on the changed file — clean
• webpack changeSignature bundle — builds successfully
• Manual VS Code UI verification of the dialog still recommended by a reviewer.

[wenytang-ms]

current behavior

beforefix.mp4

fixed

afterfix.mp4