bug: Invalid onClick event type for IonTabButton in React

[fab1o]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

Typescript is complaining about the onClick event type of the IonTabButton

const App: React.FC = () => {
  async function handleTabClick(e: CustomEvent<HTMLIonTabButtonElement>) {
    alert(e.detail.tab);
  }

  return (
    <IonTabButton tab="myTab" onClick={handleTabClick}>
  );
};

Expected Behavior

Expects TypeScript to not complain

Steps to Reproduce

Create a IonTabButton with ionic fremework v7, react and typescript and implement the onClick event as described above

Code Reproduction URL

No response

Ionic Info

   Require stack:
   - /Users/fabio/.nvm/versions/node/v20.4.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/fabio/.nvm/versions/node/v20.4.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/fabio/.nvm/versions/node/v20.4.0/lib/node_modules/@ionic/cli/index.js
   - /Users/fabio/.nvm/versions/node/v20.4.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.1 (/Users/fabio/.nvm/versions/node/v20.4.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.2.2

Capacitor:

Capacitor CLI : 5.2.2
@capacitor/android : not installed
@capacitor/core : 5.2.2
@capacitor/ios : 5.2.2

Utility:

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

System:

NodeJS : v20.4.0 (/Users/fabio/.nvm/versions/node/v20.4.0/bin/node)
npm : 9.7.2
OS : macOS Unknown

Additional Information

Should be a quick fix

[sean-perkins]

@fab1o thanks for reporting this issue & submitting a pull request for it! I've confirmed this behavior is incorrect, I'll take a look at your pull request next 👍

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.