bug: [React 5.0.4] IonTabs - Using HTMLIonTabElement type for ref gives [TS 2322] error.

Bug Report

Ionic version:

[x] 5.0.4

Current behavior: Declaring a reference to tabs elements as HTMLIonTabsElement and then using it on an IonTabs element gives an error saying

Type 'RefObject<HTMLIonTabsElement>' is not assignable to type 'RefObject<IonTabs>'.

Expected behavior: Should be able to create a ref using HTMLIonTabsElement type and assign it to a Tabs element.

Steps to reproduce:

1. Create a ref variable with type HTMLIonTabsElement.
2. Assign it to the Tabs element.

Related code:

let tabsRef = useRef<HTMLIonTabsElement>(null);

return (
    <IonTabs ref={tabsRef}>
    </IonTabs>
);

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.1.0 (/Users/abc/.nvm/versions/node/v10.16.3/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.4

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

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

System:

   NodeJS : v10.16.3 (/Users/abc/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.13.0
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. I am going to close this as devs should use IonTabsContext instead of HTMLIonTabsElement. Certain components such as tabs needed to have special React wrappers in order to integrate with React Router, which is why this difference exists. We will look into making these sorts of things clearer in the documentation. Thank you!

[liamdebeasi]

Yes, thank you! For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Please let me know if you have any questions.