Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: React component types created with createControllerComponent and createOverlayComponent don't support refs. #19924

Closed
aub opened this issue Nov 15, 2019 · 2 comments · Fixed by wo-ist-henry/DriveWithMe#41
Labels
package: react @ionic/react package

Comments

@aub
Copy link
Contributor

aub commented Nov 15, 2019

Bug Report

Ionic version:

[x] 4.11.4

Current behavior:

For any of the component types created with createControllerComponent or createOverlayComponent, the typing is such that you cannot pass them a ref. As an example, the following code:

const alertRef = createRef<HTMLIonAlertElement>();
<IonAlert ref={alertRef} />

Produces an error like this when compiled by Typescript:

Type 'RefObject<HTMLIonAlertElement>' is not assignable to type 'string | ((instance: { overlay?: HTMLIonAlertElement | undefined; isUnmounted: boolean; componentDidMount(): Promise<void>; componentWillUnmount(): void; ... 8 more ...; refs: { ...; }; } | null) => void) | RefObject<...> | null | undefined'.
  Type 'RefObject<HTMLIonAlertElement>' is not assignable to type 'RefObject<{ overlay?: HTMLIonAlertElement | undefined; isUnmounted: boolean; componentDidMount(): Promise<void>; componentWillUnmount(): void; componentDidUpdate(prevProps: AlertOptions & ReactControllerProps): Promise<...>; ... 7 more ...; refs: { ...; }; }>'.
    Type 'HTMLIonAlertElement' is missing the following properties from type '{ overlay?: HTMLIonAlertElement | undefined; isUnmounted: boolean; componentDidMount(): Promise<void>; componentWillUnmount(): void; componentDidUpdate(prevProps: AlertOptions & ReactControllerProps): Promise<...>; ... 7 more ...; refs: { ...; }; }': isUnmounted, componentDidMount, componentWillUnmount, componentDidUpdate, and 6 more.  TS2322

Expected behavior:
These components should accept a ref.

Steps to reproduce:
See the code above.

Related code:
The createComponent function is used to make most of the React components, and it returns the result of a call to createForwardRef based on the class it has defined.

The createOverlayComponent and createControllerComponent functions return the component class directly. I am definitely not an expert, but it seems like they should be changed to work the way createComponent does w.r.t. the ref.

insert short code snippets here

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.5

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

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

System:

   NodeJS : v12.12.0 (/usr/local/Cellar/node/12.12.0/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

@elylucas
Copy link
Contributor

fixed in 4.11.6

@ionitron-bot
Copy link

ionitron-bot bot commented Jan 10, 2020

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jan 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: react @ionic/react package
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants