"FocusEvent" fires many times

[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?

[technobulka]

And it always place focus on first checkbox in table.

[cagatay.civici]

Could you please share your code for us to review?

[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>

[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.