bug - fix menu dropdown not opening after delete (#22752)

* fix menu dropdonw not opening after delete

* add changelog and tests

* Update changelog file

Author: rishabh-gupta-hashicorp

.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.
+```

ui/packages/consul-ui/app/components/list-collection/index.hbs

@@ -33,7 +33,7 @@
         <YieldSlot @name="details"><div class="detail">{{yield cell.item cell.index}}</div></YieldSlot>
         <YieldSlot @name="actions"
           @params={{
-            block-params (component 'more-popover-menu' expanded=(if (eq checked cell.index) true false) onchange=(action "change" cell.index))
+            block-params (component 'more-popover-menu' expanded=(if (eq checked cell.item.uid) true false) onchange=(action "change" cell.item.uid))
           }}
         >
           <div class="actions">
@@ -51,13 +51,13 @@
       <li
         data-test-list-row
         onclick={{action 'click'}}
-        class={{if (not linkable) 'linkable' (if (is linkable item=cell.item) 'linkable')}}
+        class={{if (not linkable) 'linkable' (if (is linkable item=item) 'linkable')}}
       >
         <YieldSlot @name="header"><div class="header">{{yield item index}}</div></YieldSlot>
         <YieldSlot @name="details"><div class="detail">{{yield item index}}</div></YieldSlot>
         <YieldSlot @name="actions"
           @params={{
-            block-params (component 'more-popover-menu' onchange=(action "change" index))
+            block-params (component 'more-popover-menu' onchange=(action "change" item.uid))
           }}
         >
           <div class="actions">

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;
 

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`
+      <ListCollection @items={{this.items}} as |item index Actions|>
+        <BlockSlot @name="header">{{item.name}}</BlockSlot>
+        <BlockSlot @name="actions" as |Actions|>
+          <Actions as |Action|>
+            <Action>
+              <BlockSlot @name="label">Action</BlockSlot>
+            </Action>
+          </Actions>
+        </BlockSlot>
+      </ListCollection>
+    `);
+
+    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);
+  });
 });