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
+    <input :placeholder="placeholder" :class="{ 'skillbox-input--error': error }" :value="value"
-      :placeholder="placeholder"
+      class="modal-input__inputfield skillbox-input" @input="input" />
-      :class="{ 'skillbox-input--error': error }"
+    <div class="modal-input__error" v-if="error">
-      :value="value"
-      class="modal-input__inputfield skillbox-input"
-      @input="$emit('input', $event.target.value)"
-    />
-    <div
-      class="modal-input__error"
-      v-if="error"
-    >
       Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+defineProps<{
-  props: ['value', 'error', 'placeholder'],
+  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
+  <modal :hide-header="false" :small="true">
-    :hide-header="false"
-    :small="true"
-  >
     <template #header>
       <h4>{{ type }} bearbeiten</h4>
     </template>
 
-    <modal-input
+    <modal-input :value="name" :placeholder="placeholder" data-cy="edit-name-input" @input="input" />
-      :value="name"
-      :placeholder="placeholder"
-      data-cy="edit-name-input"
-      @input="$emit('input', $event)"
-    />
     <template #footer>
-      <a
+      <a class="button button--primary" data-cy="modal-save-button" @click="emit('save')">Speichern</a>
-        class="button button--primary"
+      <a class="button" @click="emit('cancel')">Abbrechen</a>
-        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 {
+export interface Props {
-  props: {
+  name: string;
-    name: {
+  type: string;
-      type: String,
+  placeholder: string;
-      default: '',
+}
-    },
+
-    type: {
+withDefaults(defineProps<Props>(), {
-      type: String,
+  name: '',
-      default: '',
+  type: '',
-    },
+  placeholder: 'Namen bearbeiten',
-    placeholder: {
+});
-      type: String,
+
-      default: 'Namen bearbeiten',
+const emit = defineEmits(['cancel', 'save', 'input']);
-    },
+
-  },
+const input = (e: string) => {
-  components: {
+  emit('input', e);
-    Modal,
-    ModalInput,
-  },
 };
 </script>

client/src/components/snapshots/EditSnapshotTitleWizard.vue

@@ -1,12 +1,6 @@
 <template>
-  <edit-name-wizard
+  <edit-name-wizard :name="name" type="Snapshot" placeholder="Titel bearbeiten" @input="input" @cancel="hideModal"
-    :name="name"
+    @save="save" />
-    type="Snapshot"
-    placeholder="Titel bearbeiten"
-    @input="name = $event"
-    @cancel="hideModal"
-    @save="save"
-  />
 </template>
 
 <script>
@@ -34,6 +28,9 @@ export default {
     hideModal() {
       this.$modal.cancel();
     },
+    input(name) {
+      this.name = name;
+    },
   },
 };
 </script>