From 30b16cca89360df8f360bfdef7b5746f5b60000d Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Mon, 19 Apr 2021 16:49:27 +0200
Subject: [PATCH] Reset v-textfield to null when cleared (#5141)

* Reset v-textfield to null when cleared

* Add option to configure nullable to textarea interface

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 app/src/components/v-textarea/v-textarea.vue      | 11 ++++++++++-
 app/src/interfaces/textarea/index.ts              | 15 +++++++++++++++
 app/src/interfaces/textarea/textarea.vue          |  5 +++++
 app/src/interfaces/wysiwyg/wysiwyg.vue            |  2 +-
 .../components/users-invite/users-invite.vue      |  2 +-
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/app/src/components/v-textarea/v-textarea.vue b/app/src/components/v-textarea/v-textarea.vue
index 45fd67836b..19173fbad8 100644
--- a/app/src/components/v-textarea/v-textarea.vue
+++ b/app/src/components/v-textarea/v-textarea.vue
@@ -42,6 +42,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		nullable: {
+			type: Boolean,
+			default: true,
+		},
 		expandOnFocus: {
 			type: Boolean,
 			default: false,
@@ -68,7 +72,12 @@ export default defineComponent({
 
 		function emitValue(event: InputEvent) {
 			const value = (event.target as HTMLInputElement).value;
-			emit('input', value);
+
+			if (props.nullable === true && value === '') {
+				emit('input', null);
+			} else {
+				emit('input', value);
+			}
 		}
 
 		function trimIfEnabled() {
diff --git a/app/src/interfaces/textarea/index.ts b/app/src/interfaces/textarea/index.ts
index 0d4afa7321..4a5a10042c 100644
--- a/app/src/interfaces/textarea/index.ts
+++ b/app/src/interfaces/textarea/index.ts
@@ -55,5 +55,20 @@ export default defineInterface({
 				default_value: 'sans-serif',
 			},
 		},
+		{
+			field: 'clear',
+			name: '$t:interfaces.text-input.clear',
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: '$t:interfaces.text-input.clear_label',
+				},
+			},
+			schema: {
+				default_value: false,
+			},
+		},
 	],
 });
diff --git a/app/src/interfaces/textarea/textarea.vue b/app/src/interfaces/textarea/textarea.vue
index 713056ac9c..d9d23f4ee0 100644
--- a/app/src/interfaces/textarea/textarea.vue
+++ b/app/src/interfaces/textarea/textarea.vue
@@ -2,6 +2,7 @@
 	<v-textarea
 		v-bind="{ placeholder, trim }"
 		:value="value"
+		:nullable="!clear"
 		:disabled="disabled"
 		:class="font"
 		@input="$listeners.input"
@@ -17,6 +18,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		clear: {
+			type: Boolean,
+			default: false,
+		},
 		disabled: {
 			type: Boolean,
 			default: false,
diff --git a/app/src/interfaces/wysiwyg/wysiwyg.vue b/app/src/interfaces/wysiwyg/wysiwyg.vue
index 858b05b0f2..6c8378ce47 100644
--- a/app/src/interfaces/wysiwyg/wysiwyg.vue
+++ b/app/src/interfaces/wysiwyg/wysiwyg.vue
@@ -129,7 +129,7 @@
 						<div class="grid">
 							<div class="field">
 								<div class="type-label">{{ $t('embed') }}</div>
-								<v-textarea v-model="embed" />
+								<v-textarea v-model="embed" :nullable="false" />
 							</div>
 						</div>
 					</v-tab-item>
diff --git a/app/src/views/private/components/users-invite/users-invite.vue b/app/src/views/private/components/users-invite/users-invite.vue
index c5631c69ec..ac80c90afe 100644
--- a/app/src/views/private/components/users-invite/users-invite.vue
+++ b/app/src/views/private/components/users-invite/users-invite.vue
@@ -7,7 +7,7 @@
 				<div class="grid">
 					<div class="field">
 						<div class="type-label">{{ $t('emails') }}</div>
-						<v-textarea v-model="emails" :placeholder="$t('email_examples')" />
+						<v-textarea v-model="emails" :nullable="false" :placeholder="$t('email_examples')" />
 					</div>
 					<div class="field" v-if="role === null">
 						<div class="type-label">{{ $t('role') }}</div>