diff --git a/.changelog/22752.txt b/.changelog/22752.txt new file mode 100644 index 000000000000..c7e092172aff --- /dev/null +++ b/.changelog/22752.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: fixes the issue where when doing deletes of multiple tokens or policies, the three dots on the right hand side stops responding after the first delete. +``` diff --git a/ui/packages/consul-ui/app/components/list-collection/index.hbs b/ui/packages/consul-ui/app/components/list-collection/index.hbs index 5988cc14986b..02379a46f44d 100644 --- a/ui/packages/consul-ui/app/components/list-collection/index.hbs +++ b/ui/packages/consul-ui/app/components/list-collection/index.hbs @@ -33,7 +33,7 @@
{{yield cell.item cell.index}}
@@ -51,13 +51,13 @@
  • {{yield item index}}
    {{yield item index}}
    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); + }); });