bug: setting button="true" after load does not make item focusable

[eLyrin]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

when navigated via tab-key, the ion-item is not highlighted correctly after switching from button=false to button=true.

Expected Behavior

ion-item should adjust it's highlighting styles when the button property changes. the css classes ion-focusable and ion-focused are no longer present when the bug appears.

my wild guess is that this.focusable is initialized once, but never updated: https://github.com/ionic-team/ionic-framework/blob/v7.5.0/core/src/components/item/item.tsx#L265

Steps to Reproduce

It's important to start with foo = false as initial value to reproduce the bug.

<ion-button (click)="foo = !foo">toggle</ion-button>
<ion-item [button]="foo">
  <ion-text>button mode active: {{foo}}</ion-text>
</ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 Ionic Framework : @ionic/angular 7.5.0 @angular-devkit/build-angular : 16.2.10 @angular-devkit/schematics : 16.2.1 @angular/cli : 16.2.1 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 4.8.1 @capacitor/android : 4.8.1 @capacitor/core : 4.8.1 @capacitor/ios : 4.8.1

Cordova:

Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : not installed globally native-run : 1.7.4

System:

NodeJS : v18.18.2 (C:\Program Files\nodejs\node.exe) npm : 9.8.1 OS : Windows 10