diff --git a/ui/packages/consul-ui/app/components/list-collection/index.js b/ui/packages/consul-ui/app/components/list-collection/index.js
index f4391838c45c..134e0f182a03 100644
--- a/ui/packages/consul-ui/app/components/list-collection/index.js
+++ b/ui/packages/consul-ui/app/components/list-collection/index.js
@@ -40,7 +40,8 @@ export default Component.extend(Slotted, {
const o = this;
this['cell-layout'].formatItemStyle = function (itemIndex) {
let style = formatItemStyle.apply(this, arguments);
- if (o.checked === itemIndex) {
+ const items = get(o, 'items');
+ if (items && items[itemIndex] && o.checked === items[itemIndex].uid) {
style = `${style};z-index: 1`;
}
return style;
@@ -75,7 +76,7 @@ export default Component.extend(Slotted, {
},
change: function (index, e = {}) {
if (e.target.checked && index !== this.checked) {
- set(this, 'checked', parseInt(index));
+ set(this, 'checked', index);
this.$row = this.dom.closest('li', e.target);
this.$row.style.zIndex = 1;
diff --git a/ui/packages/consul-ui/tests/integration/components/list-collection-test.js b/ui/packages/consul-ui/tests/integration/components/list-collection-test.js
index 6c951a96f67e..07f96e2c5870 100644
--- a/ui/packages/consul-ui/tests/integration/components/list-collection-test.js
+++ b/ui/packages/consul-ui/tests/integration/components/list-collection-test.js
@@ -5,7 +5,7 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, triggerEvent } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | list collection', function (hooks) {
@@ -26,4 +26,48 @@ module('Integration | Component | list collection', function (hooks) {
assert.dom('*').hasText('');
});
+
+ test('it manages checked state and z-index on change', async function (assert) {
+ this.set('items', [
+ { id: 1, name: 'Item 1' },
+ { id: 2, name: 'Item 2' },
+ ]);
+
+ // Add a footer for collision detection
+ const footer = document.createElement('footer');
+ footer.setAttribute('role', 'contentinfo');
+ footer.style.position = 'fixed';
+ footer.style.bottom = '0';
+ footer.style.height = '50px';
+ document.body.appendChild(footer);
+
+ await render(hbs`
+
+ {{item.name}}
+
+
+
+ Action
+
+
+
+
+ `);
+
+ const checkbox = this.element.querySelector('input[type="checkbox"]');
+ const row = this.element.querySelector('[data-test-list-row]');
+
+ // Test checking - should set z-index and handle footer collision
+ checkbox.checked = true;
+ await triggerEvent(checkbox, 'change');
+ assert.equal(row.style.zIndex, '1', 'Row should have z-index 1 when checked');
+
+ // Test unchecking - should clear z-index
+ checkbox.checked = false;
+ await triggerEvent(checkbox, 'change');
+ assert.strictEqual(row.style.zIndex, '', 'Row z-index should be cleared when unchecked');
+
+ // Cleanup
+ document.body.removeChild(footer);
+ });
});