Input components inside DataTable break when upgrading from PrimeVue 1 to PrimeVue 2

[wanglin86769]

Input components inside DataTable work properly in PrimeVue 1.3.2, but when upgrading to PrimeVue 2 like 2.4.2, the focus (cursor) of a input component suddenly switch to another input component when stroking the keyboard to input data.

The following is the sample code.

<template>
	<div class="p-grid">
		<div class="p-col-12">
			<h1 style="text-align: center">Funds</h1>
			<Button label="Add" icon="pi pi-plus" @click="addFund" />
			<DataTable :value="funds" >
				<Column field="title" headerStyle="width: 30%">
					<template #header>
						Subject
					</template>
					<template #body="slotProps">
						<Textarea style="width: 100%; margin-top: 5px; margin-bottom: 5px;" v-model="slotProps.data.title" :autoResize="true" rows="5"/>
					</template>
				</Column>
				<Column headerStyle="width: 10%" bodyStyle="text-align: center">
					<template #header>
						Period
					</template>
					<template #body="slotProps">
						<InputMask style="width: 100px" mask="9999-99-99" v-model="slotProps.data.start" placeholder="start date" />
						<div style="text-align: center">to</div>
						<InputMask style="width: 100px" mask="9999-99-99" v-model="slotProps.data.end" placeholder="end date" />
					</template>
				</Column>
				<Column field="amount" headerStyle="width: 10%">
					<template #header>
						amount
					</template>
					<template #body="slotProps">
						<InputText style="width: 100px" type="text" v-model.number="slotProps.data.amount" />
					</template>
				</Column>
				<Column headerStyle="width: 5%" bodyStyle="text-align: center" > 
					<template #header>
						<i class="pi pi-cog" style="font-size: 1.5em"></i>
					</template>
					<template #body="slotProps">
						<i class="fa fa-minus-circle" @click="removeFund(slotProps.index)" style="font-size: 1.75em; color: red"></i>
					</template>
				</Column>
			</DataTable>
		</div>
	</div>
</template>

<script>

export default {
	data() {
        return {
			funds: [],
        }
	},
	methods: {
		addFund() {
			this.funds.push({});
		},
		removeFund(index) {
            this.funds.splice(index, 1);
		},
	}
}
</script>

[sid-6581]

Does it work in 2.3.0? All the 2.4.x releases have been so broken they've been unusable for us.

[wanglin86769]

Does it work in 2.3.0? All the 2.4.x releases have been so broken they've been unusable for us.

No, it does not work in 2.3.0, 2.2.0 or 2.1.0, only works in 1.3.2 or probably other 1.x

[tugcekucukoglu]

With PrimeVue 2.4.2, I could not replicate it. https://codesandbox.io/s/exciting-sanne-8tcu3

What is your exact test case? Without codesandbox it's really hard to say something.

[wanglin86769]

@tugcekucukoglu
Please refer to the following codesandbox. You may want to click the 'Add' button to add a row, and try to input characters in every input components.
https://codesandbox.io/s/stupefied-lichterman-ihupt

[zsuzsmuzs]

The problem might be with the InputMask. I had issues with that one as well.