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

@@ -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() {

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,
+			},
+		},
 	],
 });

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,

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>

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>