From f7a5de701add6e43484c8a95c990117e575c77b9 Mon Sep 17 00:00:00 2001
From: Bernardo Cardoso <bernardo.cardoso@outsystems.com>
Date: Thu, 25 Jan 2024 14:47:00 +0000
Subject: [PATCH 1/3] [fix](ion-item): update ion-item focus after switching
 button status

---
 core/src/components/item/item.tsx             |  6 ++++++
 .../components/item/test/buttons/index.html   | 13 ++++++++++++
 core/src/components/item/test/item.spec.tsx   | 20 +++++++++++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 core/src/components/item/test/item.spec.tsx

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index ad056c5cdfc..c6c18d4e981 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   @State() counterString: string | null | undefined;
 
+  @Watch('button')
+  buttonChanged() {
+    // Update the focusable option when the button option is changed
+    this.focusable = this.isFocusable();
+  }
+
   @Watch('counterFormatter')
   counterFormatterChanged() {
     this.updateCounterOutput(this.getFirstInput());
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index d28eafee337..1e1429d5391 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -310,6 +310,10 @@ <h3>Avatar Start</h3>
             </ion-button>
           </div>
         </ion-item>
+
+        <ion-item id="focusableTest">
+          <ion-toggle id="focusableTestToggle">Toggle Button Option</ion-toggle>
+        </ion-item>
       </ion-content>
     </ion-app>
 
@@ -366,6 +370,15 @@ <h3>Avatar Start</h3>
       function testClickOutsize(ev) {
         console.log('CLICK OUTSIDE!', ev.target.tagName, ev.target.textContent.trim());
       }
+
+      const focusableItem = document.getElementById('focusableTest');
+      const focusableItemToggle = document.getElementById('focusableTestToggle');
+
+      if (focusableItemToggle) {
+        focusableItemToggle.addEventListener('ionChange', (event) => {
+          focusableItem.button = event.detail.checked;
+        });
+      }
     </script>
   </body>
 </html>
diff --git a/core/src/components/item/test/item.spec.tsx b/core/src/components/item/test/item.spec.tsx
new file mode 100644
index 00000000000..f1cc9cfec78
--- /dev/null
+++ b/core/src/components/item/test/item.spec.tsx
@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Item } from '../item';
+
+it('should change focusable option after switching button option status', async () => {
+  const page = await newSpecPage({
+    components: [Item],
+    template: () => <ion-item button={false}></ion-item>,
+  });
+
+  const item = page.body.querySelector('ion-item')!;
+  // Change button attribute to true
+  item.setAttribute('button', 'true');
+
+  await page.waitForChanges();
+
+  // Check if it has the expected class that gives the highlight style to .item-highlight element
+  expect(item).toHaveClass('ion-focusable');
+});

From ae5f68deb53244bd25a8c0583e5fcbeafcffc327 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 26 Jan 2024 11:55:36 -0500
Subject: [PATCH 2/3] revert: reset item buttons test temlate

---
 core/src/components/item/test/buttons/index.html | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index 1e1429d5391..d28eafee337 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -310,10 +310,6 @@ <h3>Avatar Start</h3>
             </ion-button>
           </div>
         </ion-item>
-
-        <ion-item id="focusableTest">
-          <ion-toggle id="focusableTestToggle">Toggle Button Option</ion-toggle>
-        </ion-item>
       </ion-content>
     </ion-app>
 
@@ -370,15 +366,6 @@ <h3>Avatar Start</h3>
       function testClickOutsize(ev) {
         console.log('CLICK OUTSIDE!', ev.target.tagName, ev.target.textContent.trim());
       }
-
-      const focusableItem = document.getElementById('focusableTest');
-      const focusableItemToggle = document.getElementById('focusableTestToggle');
-
-      if (focusableItemToggle) {
-        focusableItemToggle.addEventListener('ionChange', (event) => {
-          focusableItem.button = event.detail.checked;
-        });
-      }
     </script>
   </body>
 </html>

From 49b4ed77cc26daf1e61a76215fe49045a1e3fdf6 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 26 Jan 2024 11:56:46 -0500
Subject: [PATCH 3/3] chore: move spec test into describe block

---
 core/src/components/item/test/item.spec.tsx | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/core/src/components/item/test/item.spec.tsx b/core/src/components/item/test/item.spec.tsx
index f1cc9cfec78..750930ef828 100644
--- a/core/src/components/item/test/item.spec.tsx
+++ b/core/src/components/item/test/item.spec.tsx
@@ -3,18 +3,20 @@ import { newSpecPage } from '@stencil/core/testing';
 
 import { Item } from '../item';
 
-it('should change focusable option after switching button option status', async () => {
-  const page = await newSpecPage({
-    components: [Item],
-    template: () => <ion-item button={false}></ion-item>,
-  });
+describe('item', () => {
+  it('should change focusable option after switching button option status', async () => {
+    const page = await newSpecPage({
+      components: [Item],
+      template: () => <ion-item button={false}></ion-item>,
+    });
 
-  const item = page.body.querySelector('ion-item')!;
-  // Change button attribute to true
-  item.setAttribute('button', 'true');
+    const item = page.body.querySelector('ion-item')!;
+    // Change button attribute to true
+    item.setAttribute('button', 'true');
 
-  await page.waitForChanges();
+    await page.waitForChanges();
 
-  // Check if it has the expected class that gives the highlight style to .item-highlight element
-  expect(item).toHaveClass('ion-focusable');
+    // Check if it has the expected class that gives the highlight style to .item-highlight element
+    expect(item).toHaveClass('ion-focusable');
+  });
 });