Repository: nteract/nteract (language: python)

Issue:
Input prompts don't disappear after entry
**Application or Package Used**
nteract desktop

**Describe the bug**
Input prompts do not disappear after a reply is sent. Thus if there are multiple prompts (for example with multiple `input()` calls, or when using the pdb debugger), prompts accumulate endlessly. Also the input text is synchronized across all prompts, and remembered after clearing the cell outputs.

**To Reproduce**
Steps to reproduce the behavior:

1. Connect to a python kernel
2. Add a code cell with multiple `input()` calls and execute it
3. Enter a value into each prompt and click "Submit"
4. Notice that the input prompts do not disappear. In addition, the input text is synchronized across all prompts.

**Expected behavior**
When clicking "Submit" on an input prompt, the input box should disappear. Jupyter and JupyterLab follow this behavior, and also append the prompt text and reply to stdout.

**Screenshots**
![nteractprompts](https://user-images.githubusercontent.com/67761731/129422404-959a7b8b-8f69-4c14-aecf-fe9f93d699bc.gif)

**Desktop (please complete the following information):**
- OS: Windows 10
- Version 0.28.0



Discussion / hints:

Fix patch:
diff --git a/packages/stateful-components/src/cells/code-cell.tsx b/packages/stateful-components/src/cells/code-cell.tsx
index 9637e6d0d4..67ba5a1c6c 100644
--- a/packages/stateful-components/src/cells/code-cell.tsx
+++ b/packages/stateful-components/src/cells/code-cell.tsx
@@ -99,9 +99,9 @@ export default class CodeCell extends React.Component<ComponentProps> {
      * Users can continue to add the editorSlots as children
      */
     const editor = children?.editor;
-    const pagers = children?.pagers || defaults.pagers;
-    const inputPrompts = children?.pagers || defaults.inputPrompts;
-    const outputs = children?.outputs || defaults.outputs;
+    const pagers = children?.pagers ?? defaults.pagers;
+    const inputPrompts = children?.inputPrompts ?? defaults.inputPrompts;
+    const outputs = children?.outputs ?? defaults.outputs;
     const toolbar = children?.toolbar;
 
     return (
diff --git a/packages/stateful-components/src/outputs/input-prompts.tsx b/packages/stateful-components/src/outputs/input-prompts.tsx
index baf87c6534..79c7020e2f 100644
--- a/packages/stateful-components/src/outputs/input-prompts.tsx
+++ b/packages/stateful-components/src/outputs/input-prompts.tsx
@@ -49,19 +49,26 @@ export class PromptRequest extends React.PureComponent<Props, State> {
 
   render() {
     const { prompts } = this.props;
+    // Only the last prompt should be visible, beucase the rest have already been handled
+    // and we only store a single value in our state anyway. See #5592.
+    const prompt = prompts.last(undefined);
     return (
       <div className="nteract-cell-input-prompts">
-        {prompts.map(prompt => (
-          <form onSubmit={this.handleSubmitPromptReply}>
-            <label>{prompt.prompt}</label>
-            <input
-              type={prompt.password ? "password" : "text"}
-              value={this.state.value}
-              onChange={this.handleChange}
-            />
-            <input type="submit" />
-          </form>
-        ))}
+        {
+          prompt === undefined
+            ? null
+            : (
+              <form onSubmit={this.handleSubmitPromptReply}>
+                <label>{prompt.prompt}</label>
+                <input
+                  type={prompt.password ? "password" : "text"}
+                  value={this.state.value}
+                  onChange={this.handleChange}
+                />
+                <input type="submit"/>
+              </form>
+            )
+        }
       </div>
     );
   }


Test patch:
diff --git a/packages/stateful-components/__tests__/outputs/input-prompts.spec.tsx b/packages/stateful-components/__tests__/outputs/input-prompts.spec.tsx
index 1274f1029b..3a2db83cd8 100644
--- a/packages/stateful-components/__tests__/outputs/input-prompts.spec.tsx
+++ b/packages/stateful-components/__tests__/outputs/input-prompts.spec.tsx
@@ -1,6 +1,6 @@
 import { mount } from "enzyme";
-import Immutable from "immutable";
-import React from "react";
+import * as Immutable from "immutable";
+import * as React from "react";
 
 import { PromptRequest } from "../../src/outputs/input-prompts";
 
@@ -9,7 +9,7 @@ describe("PromptRequest", () => {
     const component = mount(<PromptRequest prompts={Immutable.List([])} />);
     expect(component.find("form")).toHaveLength(0);
   });
-  it("renders a form for each prompt", () => {
+  it("renders one form when given multiple prompts", () => {
     const component = mount(
       <PromptRequest
         prompts={Immutable.List([
@@ -24,6 +24,6 @@ describe("PromptRequest", () => {
         ])}
       />
     );
-    expect(component.find("form")).toHaveLength(2);
+    expect(component.find("form")).toHaveLength(1);
   });
 });