Selectable table with form elements mouse release problem [Chrome]

When i use selectable table with form elements when the row is selected, if i release the mouse outside the form element it deselects the row.

Vue version: 2.6.10 Bootstrap-Vue version: 2.2.2

Here is a GIF illustrating the issue.

[DM2489]

@TheAndroidGuy Thanks, seems like a sensible solution. I’ll adopt the same external tracker approach.

[TheAndroidGuy]

@DM2489 I ended up using primitive workaround:

inside data:

my_row_selected: null

inside methods:

myRowSelect: function(index){
  this.my_row_selected = index
}

inside component:

<div v-if="my_row_selected == row.index">
  <!-- some form element when row is selected -->
</div>
<div v-else @click="myRowSelect(row.index)">
  <!-- data when row is not selected -->
</div>

Another even worse workaround would be to use modal when the row is clicked and display the form elements inside the modal.