Changing props of NcInputFiled resets value

[dartcafe]

I am not sure, if it is a bug or by intention.

i.e. if the success prop or any other prop of the NcInputField changes, the input value gets reset to the bound value and the entered value gets lost.

Affects NcActionInput and other text fields.

[raimund-schluessler]

Could you provide an example, I cannot reproduce this in the docs, this works fine:

<template>
	<div class="wrapper">
		<NcButton @click="error=!error">Toggle error state</NcButton>
		<NcTextField :value.sync="text"
			label="Error state"
			:error="error">
		</NcTextField>
	</div>
</template>
<script>
export default {
	data() {
		return {
			text: 'error input',
			error: false,
		}
	},
}
</script>

[raimund-schluessler]

It also works for NcActionInput in the docs:

	<template>
	<div>
	<NcButton @click="error=!error">Toggle error state</NcButton>
		<NcActions>
			<NcActionInput :value.sync="text" :error="error">
				<template #icon>
					<Pencil :size="20" />
				</template>
			</NcActionInput>
			<NcActionInput :value.sync="text" :show-trailing-button="false">
				<template #icon>
					<Pencil :size="20" />
				</template>
			</NcActionInput>
			<NcActionInput :value.sync="text">
				<template #icon>
					<Pencil :size="20" />
				</template>
				This is the placeholder
			</NcActionInput>
			<NcActionInput type="password" :value.sync="text">
				<template #icon>
					<Key :size="20" />
				</template>
				Password placeholder
			</NcActionInput>
			<NcActionInput type="password" :value.sync="text" :show-trailing-button="false">
				<template #icon>
					<Key :size="20" />
				</template>
				Password placeholder
			</NcActionInput>
			<NcActionInput type="color" :value.sync="color">
				<template #icon>
					<Eyedropper :size="20" />
				</template>
				Color placeholder
			</NcActionInput>
			<NcActionInput label="Visible label" :value.sync="text">
				<template #icon>
					<Pencil :size="20" />
				</template>
				Input with visible label
			</NcActionInput>
			<NcActionInput :disabled="true" value="This is a disabled input">
				<template #icon>
					<Close :size="20" />
				</template>
			</NcActionInput>
			<NcActionInput type="date" isNativePicker :value="new Date()">
				<template #icon>
					<Pencil :size="20" />
				</template>
				Please pick a date
			</NcActionInput>
			<NcActionInput type="date">
				<template #icon>
					<Pencil :size="20" />
				</template>
				Please pick a date
			</NcActionInput>
			<NcActionInput type="multiselect" :options="['Apple', 'Banana', 'Cherry']">
				<template #icon>
					<Pencil :size="20" />
				</template>
				Please pick a fruit
			</NcActionInput>
			<NcActionInput
				v-model="multiSelected"
				type="multiselect"
				label="label"
				track-by="id"
				:multiple="true"
				:options="[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]">
				<template #icon>
					<Pencil :size="20" />
				</template>
				Please pick a fruit object
			</NcActionInput>
		</NcActions>
	</div>
	</template>
	<script>
	import Close from 'vue-material-design-icons/Close'
	import Eyedropper from 'vue-material-design-icons/Eyedropper'
	import Key from 'vue-material-design-icons/Key'
	import Pencil from 'vue-material-design-icons/Pencil'

	export default {
		components: {
			Close,
			Eyedropper,
			Key,
			Pencil,
		},
		data() {
			return {
				color: '#0082C9',
				text: 'This is the input text',
				multiSelected: [],
				error: false,
			}
		},
	}
	</script>

[dartcafe]

Oh yes, I should have added some context. Sorry.

The plan is to validate the input on update. But it seems, I was on the wrong trail. I used the input field without the sync modifier but the behavior is the same with a native input field. Obvious I need to go on with a temporary input value for this strategy.

Nevermind. Thanks for your effort!