Fix modal input event handling

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);

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>
 

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>

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>