From de35e3eb05a5acbcf6a5c2bc4f3f50fccfd17e97 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 19 Jun 2023 21:10:36 +0200
Subject: [PATCH] fix sandbox template Form components - for Vue, Vue3, HTML,
 Svelte, Preact, HTML and Angular

---
 .../template/stories/basics.stories.ts             |  4 ++--
 .../angular/template/components/form.component.ts  |  2 +-
 code/renderers/html/template/components/Form.js    | 14 ++++++++------
 code/renderers/preact/template/components/Form.jsx |  2 +-
 .../svelte/template/components/Form.svelte         |  4 ++--
 code/renderers/vue/template/components/Form.vue    | 11 +++++++----
 code/renderers/vue3/template/components/Form.vue   |  5 +----
 7 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index 774ee5b07d8a..ece3bc5daa11 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -47,7 +47,7 @@ export const Callback = {
       await fireEvent.click(canvas.getByRole('button'));
     });
 
-    await expect(args.onSuccess).toHaveBeenCalled();
+    await expect(args.onSuccess).toHaveBeenCalledWith('test');
   },
 };
 
@@ -113,7 +113,7 @@ export const UserEventSetup = {
       await user.keyboard('{enter}');
       const submitButton = await canvas.findByRole('button');
       await expect(submitButton).toHaveFocus();
-      await expect(args.onSuccess).toHaveBeenCalled();
+      await expect(args.onSuccess).toHaveBeenCalledWith('Pasting: foobar');
     });
   },
 };
diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
index 2bc4c00298e8..b3415c745430 100644
--- a/code/frameworks/angular/template/components/form.component.ts
+++ b/code/frameworks/angular/template/components/form.component.ts
@@ -6,7 +6,7 @@ import { Component, Output, EventEmitter } from '@angular/core';
     <form id="interaction-test-form" (submit)="handleSubmit($event)">
       <label>
         Enter Value
-        <input type="text" data-testid="value" [value]="value" required />
+        <input type="text" data-testid="value" [(ngModel)]="value" required />
       </label>
       <button type="submit">Submit</button>
       <p *ngIf="complete">Completed!!</p>
diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
index f2f239cbff70..823a89f49b99 100644
--- a/code/renderers/html/template/components/Form.js
+++ b/code/renderers/html/template/components/Form.js
@@ -2,30 +2,32 @@
 export const Form = ({ onSuccess }) => {
   const container = document.createElement('div');
 
-  const getInnerHTML = ({ complete }) => `
+  const getInnerHTML = ({ complete, value }) => `
   <form id="interaction-test-form">
     <label>
       Enter Value
-      <input type="text" data-testid="value" required />
+      <input type="text" data-testid="value" value="${value}" required />
     </label>
     <button type="submit">Submit</button>
     ${complete ? '<p>Completed!!</p>' : ''}
   </form>
 `;
 
-  container.innerHTML = getInnerHTML({ complete: false });
+  container.innerHTML = getInnerHTML({ complete: false, value: '' });
 
   const form = container.querySelector('form');
   form.addEventListener('submit', (e) => {
     e.preventDefault();
 
+    const { value } = form.querySelector('input'); // Store the current value
+
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: true });
+      container.innerHTML = getInnerHTML({ complete: true, value });
     }, 500);
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: false });
+      container.innerHTML = getInnerHTML({ complete: false, value });
     }, 1500);
-    onSuccess(e);
+    onSuccess(value);
   });
 
   return container;
diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx
index f12e905f0dba..fb58cbb10508 100644
--- a/code/renderers/preact/template/components/Form.jsx
+++ b/code/renderers/preact/template/components/Form.jsx
@@ -24,7 +24,7 @@ export const Form = ({ onSuccess }) => {
           data-testid="value"
           value={value}
           required
-          onChange={(event) => setValue(event.target.value)}
+          onInput={(event) => setValue(event.target.value)}
         />
       </label>
       <button type="submit">Submit</button>
diff --git a/code/renderers/svelte/template/components/Form.svelte b/code/renderers/svelte/template/components/Form.svelte
index 467c31d4974b..3b2f7a5b9d97 100644
--- a/code/renderers/svelte/template/components/Form.svelte
+++ b/code/renderers/svelte/template/components/Form.svelte
@@ -26,8 +26,8 @@
 <form id="interaction-test-form" on:submit|preventDefault={handleSubmit}>
   <label>
     Enter Value
-    <input type="text" data-testid="value" {value} required on:click={handleClick} />
+    <input type="text" data-testid="value" bind:value required on:click={handleClick} />
   </label>
   <button type="submit">Submit</button>
   {#if complete}<p>Completed!!</p>{/if}
-</form>
+</form>
\ No newline at end of file
diff --git a/code/renderers/vue/template/components/Form.vue b/code/renderers/vue/template/components/Form.vue
index fc46f159e337..2375a381eb7a 100644
--- a/code/renderers/vue/template/components/Form.vue
+++ b/code/renderers/vue/template/components/Form.vue
@@ -2,7 +2,13 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input
+        type="text"
+        data-testid="value"
+        :value="value"
+        @input="value = $event.target.value"
+        required
+      />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +33,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {
diff --git a/code/renderers/vue3/template/components/Form.vue b/code/renderers/vue3/template/components/Form.vue
index fc46f159e337..e867030f0917 100644
--- a/code/renderers/vue3/template/components/Form.vue
+++ b/code/renderers/vue3/template/components/Form.vue
@@ -2,7 +2,7 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input type="text" data-testid="value" v-model="value" required />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +27,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {