How to prevent the focus of a button in a list item

[Clyde]

I have q-list component and q-item elements in it. Each item contains a section (q-item-section side) with action buttons. How can I prevent the first action button get focus when the mouse cursor hovers over a list element?

<q-list>
  <q-item tag="label" v-for="(item, index) in this.sensors" v-bind:key="index">
    <q-item-section>
      <q-item-label>{{item.name}}</q-item-label>
      <q-item-label caption>{{item.sens}}</q-item-label>
      <q-item-label caption>{{item.descr}}</q-item-label>
    </q-item-section>
    <q-item-section side>
      <div class="row">
        <q-btn flat round color="grey-8" icon="mdi-pencil" />
        <q-btn flat round color="grey-8" icon="mdi-delete" />
      </div>
    </q-item-section>
  </q-item>
</q-list>

[metalsadman]

@Clyde tabindex="-1"

[Clyde]

@metalsadman said in How to prevent the focus of a button in a list item:

tabindex="-1"

Thank you for answer. But I’m not sure for which element I should set this property. I tried it from action buttons to the whole list, but without success. Still when the mouse cursor is over list item, the item has focus, but the first action button as well. Will it have something to do with the hover or mouseOver feature?

[turigeza]

@Clyde Remove the tag="label" and add clickable instead and it should work fine.
https://codepen.io/turigeza/pen/xxVoOxW

[Clyde]

@turigeza Thank you! It works perfectly. This wouldn’t really occur to me.