From 588d92283e6b7f057de4300d8969465158f32601 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 18 Apr 2023 16:46:17 +0200
Subject: [PATCH] Fix modal input event handling

---
 .../e2e/frontend/modules/snapshots.spec.js    |  3 +-
 client/src/components/ModalInput.vue          | 29 ++++-----
 .../src/components/profile/EditNameWizard.vue | 62 +++++++------------
 .../snapshots/EditSnapshotTitleWizard.vue     | 13 ++--
 4 files changed, 43 insertions(+), 64 deletions(-)

diff --git a/client/cypress/e2e/frontend/modules/snapshots.spec.js b/client/cypress/e2e/frontend/modules/snapshots.spec.js
index feb5e6d8..becc562b 100644
--- a/client/cypress/e2e/frontend/modules/snapshots.spec.js
+++ b/client/cypress/e2e/frontend/modules/snapshots.spec.js
@@ -245,7 +245,8 @@ describe('Snapshot', () => {
     cy.visit('module/miteinander-reden/snapshots');
     cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
     cy.getByDataCy('rename-snapshot-button').click();
-    cy.getByDataCy('edit-name-input').clear().type(newTitle);
+    cy.getByDataCy('edit-name-input').clear();
+    cy.getByDataCy('edit-name-input').type(newTitle);
     cy.getByDataCy('modal-save-button').click();
     cy.getByDataCy('snapshot-link').should('have.text', 'New Title');
     waitNTimes(5);
diff --git a/client/src/components/ModalInput.vue b/client/src/components/ModalInput.vue
index 96af04a7..44387a00 100644
--- a/client/src/components/ModalInput.vue
+++ b/client/src/components/ModalInput.vue
@@ -1,24 +1,25 @@
 <template>
   <div class="modal-input">
-    <input
-      :placeholder="placeholder"
-      :class="{ 'skillbox-input--error': error }"
-      :value="value"
-      class="modal-input__inputfield skillbox-input"
-      @input="$emit('input', $event.target.value)"
-    />
-    <div
-      class="modal-input__error"
-      v-if="error"
-    >
+    <input :placeholder="placeholder" :class="{ 'skillbox-input--error': error }" :value="value"
+      class="modal-input__inputfield skillbox-input" @input="input" />
+    <div class="modal-input__error" v-if="error">
       Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: ['value', 'error', 'placeholder'],
+<script setup lang="ts">
+defineProps<{
+  value: any;
+  error: any;
+  placeholder: any;
+}>();
+
+const emit = defineEmits(['input']);
+
+const input = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value;
+  emit('input', value);
 };
 </script>
 
diff --git a/client/src/components/profile/EditNameWizard.vue b/client/src/components/profile/EditNameWizard.vue
index 8a9fbbdd..53dc6725 100644
--- a/client/src/components/profile/EditNameWizard.vue
+++ b/client/src/components/profile/EditNameWizard.vue
@@ -1,56 +1,36 @@
 <template>
-  <modal
-    :hide-header="false"
-    :small="true"
-  >
+  <modal :hide-header="false" :small="true">
     <template #header>
       <h4>{{ type }} bearbeiten</h4>
     </template>
 
-    <modal-input
-      :value="name"
-      :placeholder="placeholder"
-      data-cy="edit-name-input"
-      @input="$emit('input', $event)"
-    />
+    <modal-input :value="name" :placeholder="placeholder" data-cy="edit-name-input" @input="input" />
     <template #footer>
-      <a
-        class="button button--primary"
-        data-cy="modal-save-button"
-        @click="$emit('save')"
-        >Speichern</a
-      >
-      <a
-        class="button"
-        @click="$emit('cancel')"
-        >Abbrechen</a
-      >
+      <a class="button button--primary" data-cy="modal-save-button" @click="emit('save')">Speichern</a>
+      <a class="button" @click="emit('cancel')">Abbrechen</a>
     </template>
   </modal>
 </template>
 
-<script>
+<script setup lang="ts">
 import Modal from '@/components/Modal.vue';
 import ModalInput from '@/components/ModalInput.vue';
 
-export default {
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: 'Namen bearbeiten',
-    },
-  },
-  components: {
-    Modal,
-    ModalInput,
-  },
+export interface Props {
+  name: string;
+  type: string;
+  placeholder: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  name: '',
+  type: '',
+  placeholder: 'Namen bearbeiten',
+});
+
+const emit = defineEmits(['cancel', 'save', 'input']);
+
+const input = (e: string) => {
+  emit('input', e);
 };
 </script>
diff --git a/client/src/components/snapshots/EditSnapshotTitleWizard.vue b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
index eea25531..f78b8c2a 100644
--- a/client/src/components/snapshots/EditSnapshotTitleWizard.vue
+++ b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
@@ -1,12 +1,6 @@
 <template>
-  <edit-name-wizard
-    :name="name"
-    type="Snapshot"
-    placeholder="Titel bearbeiten"
-    @input="name = $event"
-    @cancel="hideModal"
-    @save="save"
-  />
+  <edit-name-wizard :name="name" type="Snapshot" placeholder="Titel bearbeiten" @input="input" @cancel="hideModal"
+    @save="save" />
 </template>
 
 <script>
@@ -34,6 +28,9 @@ export default {
     hideModal() {
       this.$modal.cancel();
     },
+    input(name) {
+      this.name = name;
+    },
   },
 };
 </script>