jqxgrid first row select

Why does the first row get checked when you tab out of input fields of other detail rows?

by Justin Peszleny

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="kanban"></div>

CSS

.jqx-kanban-item-color-status {
            width: 100%;
            height: 25px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            position:relative;
            margin-top:0px;
            top: 0px;
        }
        .jqx-kanban-item {
            padding-top: 0px;
            padding-bottom:0px;
        }
        .jqx-kanban-item-text {
            padding-top: 6px;
            padding-bottom: 6px;
        }
        .jqx-kanban-item-avatar {
            top: 9px;
        }
        .jqx-kanban-template-icon {
            position: absolute;
            right: 3px;
            top:12px;
        }

JavaScript

var fields = [
  { name: "id", type: "string" },
  { name: "status", map: "state", type: "string" },
  { name: "text", map: "label", type: "string" },
  { name: "tags", type: "string" },
  { name: "color", map: "hex", type: "string" },
  { name: "resourceId", type: "number" }
];
var source =
    {
      localData: [
        { id: "1161", state: "new", label: "Make a new Dashboard", tags: "dashboard", hex: "#36c7d0", resourceId: 3 },
        { id: "1645", state: "work", label: "Prepare new release", tags: "release", hex: "#ff7878", resourceId: 1 },
        { id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#96c443", resourceId: 3 },
        { id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#ff7878", resourceId: 4 },
        { id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#96c443" }
      ],
      dataType: "array",
      dataFields: fields
    };
var dataAdapter = new $.jqx.dataAdapter(source);
var resourcesAdapterFunc = function () {
  var resourcesSource =
      {
        localData: [
          { id: 0, name: "No name" },
          { id: 1, name: "Andrew Fuller" },
          { id: 2, name: "Janet Leverling" },
          { id: 3, name: "Steven Buchanan" },
          { id: 4, name: "Nancy Davolio" },
          { id: 5, name: "Michael Buchanan" },
          { id: 6, name: "Margaret Buchanan" },
          { id: 7, name: "Robert Buchanan" },
          { id: 8, name: "Laura Buchanan" },
          { id: 9, name: "Laura Buchanan" }
        ],
        dataType: "array",
        dataFields: [
          { name: "id", type: "number" },
          { name: "name", type: "string" }
        ]
      };
  var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
  return resourcesDataAdapter;
}

$('#kanban').jqxKanban({
  template: "<div class='jqx-kanban-item' id=''>"
  + "<div class='jqx-kanban-item-color-status'></div>"
  + "<div style='display: none;'...