"FocusEvent" fires many times

UI Components for Vue
Post Reply
technobulka
Posts: 3
Joined: 07 Jul 2020, 16:00

07 Jul 2020, 16:24

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
Posts: 3
Joined: 07 Jul 2020, 16:00

08 Jul 2020, 13:49

And it always place focus on first checkbox in table.

cagatay.civici
Prime
Posts: 18332
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Jul 2020, 14:58

Could you please share your code for us to review?

technobulka
Posts: 3
Joined: 07 Jul 2020, 16:00

17 Jul 2020, 13:14

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
Prime
Posts: 18332
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

18 Jul 2020, 14:05

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.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests