Page 1 of 1
"FocusEvent" fires many times
Posted: 07 Jul 2020, 16:24
by technobulka
I created DataTable and insert my own checkbox in one field. Column selectionMode="multiple" does not suit me.
And I have a problem - when I click on any checkbox a lot of "blur, focus..." events appers in the Vue Devtools. Each of them have payload [0: FocusEvent].
How to stop this event?
Re: "FocusEvent" fires many times
Posted: 08 Jul 2020, 13:49
by technobulka
And it always place focus on first checkbox in table.
Re: "FocusEvent" fires many times
Posted: 10 Jul 2020, 14:58
by cagatay.civici
Could you please share your code for us to review?
Re: "FocusEvent" fires many times
Posted: 17 Jul 2020, 13:14
by technobulka
Yes, of course.
Code: Select all
<template>
<div>
<DataTable :value="stations" :autoLayout="true">
<Column field="station" header="Station number"></Column>
<Column field="price" header="Price">
<template #body="slotProps">
<Checkbox v-model="checked" :value="slotProps.data.station" />
{{ slotProps.data.price }}
</template>
</Column>
<Column field="created_at" header="Created"></Column>
</DataTable>
</div>
</template>
<script>
import Checkbox from "primevue/checkbox";
import Column from "primevue/column";
import DataTable from "primevue/datatable";
export default {
components: {
Checkbox,
Column,
DataTable
},
data() {
return {
stations: null,
checked: null
};
},
mounted() {
this.stations = [
{
price: 47.2,
created_at: "04.06.2020 22:00",
status: "ACCEPTED",
comment: "",
station: 222
},
{
price: 47.2,
created_at: "04.06.2020 22:00",
status: "ACCEPTED",
comment: "",
station: 260
},
{
price: 47.8,
created_at: "05.06.2020 00:00",
status: "ACCEPTED",
comment: "",
station: 21
},
{
price: 48.8,
created_at: "05.06.2020 00:00",
status: "ACCEPTED",
comment: "",
station: 38
},
{
price: 47.45,
created_at: "05.06.2020 00:00",
status: "ACCEPTED",
comment: "",
station: 202
}
];
}
};
</script>
Re: "FocusEvent" fires many times
Posted: 18 Jul 2020, 14:05
by cagatay.civici
There is a hidden checkbox for screen reader and accessibility inside the checkbox component so it happens because of this, at some point this is expected but we may improve it to make sure events to do not fire more than needed, we'll review. Thank you.