Merge pull request #3460 from nickrum/input-null-fix

Reset value of v-input to NULL if input is empty

app/src/components/v-input/v-input.vue

@@ -84,6 +84,10 @@ export default defineComponent({
 			type: [String, Number],
 			default: null,
 		},
+		nullable: {
+			type: Boolean,
+			default: true,
+		},
 		slug: {
 			type: Boolean,
 			default: false,
@@ -197,6 +201,11 @@ export default defineComponent({
 		function emitValue(event: InputEvent) {
 			let value = (event.target as HTMLInputElement).value;
 
+			if (props.nullable === true && value === '') {
+				emit('input', null);
+				return;
+			}
+
 			if (props.type === 'number') {
 				emit('input', Number(value));
 			} else {

app/src/interfaces/text-input/index.ts

@@ -87,5 +87,20 @@ export default defineInterface(({ i18n }) => ({
 				default_value: false,
 			},
 		},
+		{
+			field: 'nullable',
+			name: i18n.t('interfaces.text-input.nullable'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('interfaces.text-input.nullable_label'),
+				},
+			},
+			schema: {
+				default_value: true,
+			},
+		},
 	],
 }));

app/src/interfaces/text-input/text-input.vue

@@ -1,6 +1,7 @@
 <template>
 	<v-input
 		:value="value"
+		:nullable="nullable"
 		:placeholder="placeholder"
 		:disabled="disabled"
 		:trim="trim"
@@ -38,6 +39,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		nullable: {
+			type: Boolean,
+			default: true,
+		},
 		disabled: {
 			type: Boolean,
 			default: false,

app/src/lang/translations/en-US.yaml

@@ -917,6 +917,8 @@ interfaces:
     trim_label: Trim the start and end
     mask: Masked
     mask_label: Hide the real value
+    nullable: Nullable
+    nullable_label: Save empty value as NULL
   textarea:
     textarea: Textarea
     description: Enter multiline plain-text