Merge pull request #999 from db-ui/998-input-react-controlled-components-doesnt-work

refactor: fix reacts (controlled components) and vues (v-model) inputs

Author: annsch

packages/components/scripts/post-build/components.js

@@ -55,10 +55,7 @@ const getComponents = () => [
 		},
 		config: {
 			vue: {
-				vModel: [
-					{ modelValue: 'checked', binding: ':checked' },
-					{ modelValue: 'indeterminate', binding: ':indeterminate' }
-				]
+				vModel: [{ modelValue: 'checked', binding: ':checked' }]
 			}
 		}
 	},

packages/components/scripts/post-build/vue.js

@@ -32,14 +32,6 @@ const updateNestedComponents = (input, rootComponentName) => {
 const updateVModelBindings = (input, bindings) => {
 	let fileContent = input;
 
-	// Replace internal underscore value
-	bindings.forEach((bin) => {
-		fileContent = fileContent.replace(
-			`${bin.binding}="_${bin.modelValue}"`,
-			`${bin.binding}="${bin.modelValue}"`
-		);
-	});
-
 	// Add emits to component config
 
 	fileContent = fileContent.replace(
@@ -52,19 +44,8 @@ const updateVModelBindings = (input, bindings) => {
 	return fileContent
 		.split('\n')
 		.map((line) => {
-			const foundBinding = bindings.find(
-				(bin) =>
-					line.includes(`this._${bin.modelValue} =`) &&
-					!line.includes(
-						`this._${bin.modelValue} = this.${bin.modelValue}`
-					)
-			);
-			if (foundBinding) {
-				const emitFunction = `this.$emit("update:${foundBinding.modelValue}", this._${foundBinding.modelValue});`;
-				return `${line}\n${emitFunction}`;
-			}
 
-			return line;
+			return line.replace('// VUE:', '');
 		})
 		.join('\n');
 };

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -28,9 +28,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		initialized: false,
 		_id: DEFAULT_ID,
 		_isValid: undefined,
-		_value: '',
-		_checked: false,
-		_indeterminate: false,
 
 		handleChange: (event: any) => {
 			if (props.onChange) {
@@ -41,15 +38,15 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.change(event);
 			}
 
-			state._checked = event.target?.checked;
-			state._indeterminate = event.target?.indeterminate;
-
 			if (event.target?.validity?.valid != state._isValid) {
 				state._isValid = event.target?.validity?.valid;
 				if (props.validityChange) {
 					props.validityChange(!!event.target?.validity?.valid);
 				}
 			}
+
+			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+			// VUE:this.$emit("update:checked", event.target.checked);
 		},
 		handleBlur: (event: any) => {
 			if (props.onBlur) {
@@ -78,10 +75,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		state.initialized = true;
 		state._id = props.id ? props.id : 'checkbox-' + uuid();
 
-		if (props.value) {
-			state._value = props.value;
-		}
-
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -123,7 +116,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				name={props.name}
 				checked={props.checked}
 				disabled={props.disabled}
-				value={state._value}
+				value={props.value}
 				aria-describedby={props.describedbyid}
 				aria-invalid={props.invalid}
 				data-size={props.size}

packages/components/src/components/checkbox/model.ts

@@ -9,8 +9,7 @@ import {
 	GlobalState,
 	FormProps,
 	FormState,
-	FormCheckProps,
-	FormCheckState
+	FormCheckProps
 } from '../../shared/model';
 
 export interface DBCheckboxDefaultProps {
@@ -43,5 +42,4 @@ export type DBCheckboxState = DBCheckboxDefaultState &
 	GlobalState &
 	ChangeEventState &
 	FocusEventState &
-	FormState &
-	FormCheckState;
+	FormState;

packages/components/src/components/input/input.lite.tsx

@@ -49,7 +49,6 @@ export default function DBInput(props: DBInputProps) {
 		_id: DEFAULT_ID,
 		_isValid: undefined,
 		_dataListId: DEFAULT_ID,
-		_value: '',
 		iconVisible: (icon?: string) => {
 			return Boolean(icon && icon !== '_' && icon !== 'none');
 		},
@@ -69,15 +68,15 @@ export default function DBInput(props: DBInputProps) {
 				props.change(event);
 			}
 
-			// using controlled components for react forces us to using state for value
-			state._value = event.target.value;
-
 			if (event.target?.validity?.valid != state._isValid) {
 				state._isValid = event.target?.validity?.valid;
 				if (props.validityChange) {
 					props.validityChange(!!event.target?.validity?.valid);
 				}
 			}
+
+			// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
+			// VUE:this.$emit("update:value", event.target.value);
 		},
 		handleBlur: (event: any) => {
 			if (props.onBlur) {
@@ -108,10 +107,6 @@ export default function DBInput(props: DBInputProps) {
 			? props.dataListId
 			: `datalist-${state._id}`;
 
-		if (props.value) {
-			state._value = props.value;
-		}
-
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -138,7 +133,7 @@ export default function DBInput(props: DBInputProps) {
 				disabled={props.disabled}
 				required={props.required}
 				defaultValue={props.defaultValue}
-				value={state._value}
+				value={props.value}
 				aria-invalid={props.invalid}
 				maxLength={props.maxLength}
 				minLength={props.minLength}

packages/components/src/components/radio/model.ts

@@ -9,8 +9,7 @@ import {
 	GlobalState,
 	FormProps,
 	FormState,
-	FormCheckProps,
-	FormCheckState
+	FormCheckProps
 } from '../../shared/model';
 
 export interface DBRadioDefaultProps {
@@ -35,5 +34,4 @@ export type DBRadioState = DBRadioDefaultState &
 	GlobalState &
 	ChangeEventState &
 	FocusEventState &
-	FormState &
-	FormCheckState;
+	FormState;

packages/components/src/components/radio/radio.lite.tsx

@@ -27,7 +27,6 @@ export default function DBRadio(props: DBRadioProps) {
 	const state = useStore<DBRadioState>({
 		initialized: false,
 		_id: DEFAULT_ID,
-		_checked: false,
 		_isValid: undefined,
 
 		handleChange: (event: any) => {
@@ -39,8 +38,6 @@ export default function DBRadio(props: DBRadioProps) {
 				props.change(event);
 			}
 
-			state._checked = event.target?.checked;
-
 			if (event.target?.validity?.valid != state._isValid) {
 				state._isValid = event.target?.validity?.valid;
 				if (props.validityChange) {

packages/components/src/shared/model.ts

@@ -121,10 +121,6 @@ export type FormState = {
 	_value?: any;
 };
 
-export type FormCheckState = {
-	_checked: boolean;
-};
-
 export type GlobalTextProps = {
 	placeholder?: string;
 	maxLength?: number;