-
Notifications
You must be signed in to change notification settings - Fork 30.1k
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
[styled-components] Cannot use forwardRef with styled component #28884
Comments
Really Really need this fixed to swap to 4.0.0 +1 |
@johnnyreilly Do you think you would able to help with this? Seems that original authors lost interest. There is a bunch of other issues related to styled-components and nobody paying attention to those. Or please ping someone who could help. |
Feel free to submit at PR - this can be reviewed and merged to unblock you. |
@johnnyreilly Sorry, but that's just the thing, I don't understand what's the issue. I would be happy to do a PR if I would only half understand why it's happening :( |
I'll look into this today. |
Any word on this? It's also blocking our upgrade of |
At the moment I didn't come up with a solution yet. It looked harder than I expected. The issue is that what we called A reduced repro: const StyledInput = styled.input` `;
const inputRef = React.createRef<HTMLInputElement>();
<StyledInput ref={inputRef} />; // error Change would require adding new generic parameters and might be breaking. |
Also blocking our upgrade of styled-components to v4 for a week now :< |
Hi! Do I understand correctly that these problems are due to the fact that the authors of |
My current workaround is to add
|
This seems to be a consequence of Ref<T> including string in it. Maybe I
should just make a PR to rip the band-aid off and drop string from it,
it'll never work on anything but class components rendering class/host
components and is deprecated anyway.
|
Closing as with |
Unfortunately for me this is not working yet. I'm still using the @cmrigney solution |
Make sure you really have a some latest version of |
Problem still persists :( |
@superhawk610 is there a |
Yeah, nice catch. It's on |
@superhawk610 replacing single folder won't catch them all as there might be other diverged react types. The problem stems from some type packages targeting dependencies with wildcard Do you use Yarn? You can search for
If you have another #33015 - looks like it should be a peerdependency instead. |
@superhawk610 I've found using the I haven't had a chance to properly look into your issue, but if it is indeed a an issue of conflicting definitions, try adding the following to your "resolutions": {
"@types/react": "16.8.7"
} |
Thanks for the tips, everybody. I have a working solution, but it's still not pretty.
It seems that |
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and still allow you to omit the ref object from the deps list. Test Plan: unit tests
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and allows you to still omit the ref object from the deps list. Test Plan: unit tests
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and allows you to still omit the ref object from the deps list. Test Plan: unit tests
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and allows you to still omit the ref object from the deps list. Test Plan: unit tests
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and allows you to still omit the ref object from the deps list. Test Plan: unit tests
I ran into this today, I'm just not using |
e.g. export const Component: React.Fn<React.HTML<"tr">> = ({
children,
ref,
...props
}) => <Wide {...props}>{children}</Wide>;
const Wide = styled.div`
padding: 1em 0;
text-align: center;
`; |
For me the issue was simply using the wrong type on useRef. On an |
This issue persists, unfortunately. The fix I found works but is verbose. I'm using React.forwardRef((
{...props},
ref: ((instance: HTMLInputElement | null) => void) | React.MutableRefObject<HTMLInputElement | null> | null
) => {
return <StyledInput ref={ref} />
}) |
This worked for me: ` const ForwardRefComponent = React.forwardRef((props, ref) => <section {...props} ref={ref} />); const StyledComponent = styled(ForwardRefComponent)' export default StyledComponent; |
i wish this simple solution worked for me, but for some reason it does not. using "react": "^16.13.0", "styled-components": "^5.0.0", "styled-components": "^5.0.0", any ideas? I see the issue is closed but even with very up to date version of the libraries the error persists for me. |
I found a work around here, hope this help const StyledInput = styled.input``
export const Input = forwardRef<HTMLInputElement, Omit<JSX.IntrinsicElements['input'], 'ref'>>(
({ ...props }, forwardedRef) => {
console.log('forwardedRef', forwardedRef) // inputRef
return <StyledInput ref={forwardedRef} {...props} />
}) |
@monolithed The typings should now be correct. I threw together a small sandbox to illustrate: https://codesandbox.io/s/styled-components-ref-example-dt1wk. |
This is still broken afaict |
Something similar was happening for me with
The issue went away once I upgraded @types/styled-components from 5.1.4 to 5.1.7 |
got this issue with
My styled component is handling these params to remove the React warnings we get (following) export const SearchInput = styled(({ expandedWidthPx, ...rest }) => <Input {...rest} />)`
...
width: ${({ expandedWidthPx }) => expandedWidthPx - 180}px
`;
But when implementing the code I get the forwardRef warning
So I moved on to something like this: const ForwardRefInput = React.forwardRef((props, ref) => <Input {...props} ref={ref} />);
export const SearchInput = styled(ForwardRefInput)` but then I get the same initial warning const ForwardRefInput = React.forwardRef((props, ref) => <Input {...props} ref={ref} />);
export const SearchInput = styled(({ expandedWidthPx, ...rest }) => <ForwardRefInput {...rest} />)` and this gives the same |
Ha, taking a mental break worked this time, this now works, no console errors const ForwardRefInput = React.forwardRef(({ showTransition, expandedWidthPx, ...props }, ref) => <Input {...props} ref={ref} />);
export const SearchInput = styled(ForwardRefInput)` |
@6thpath + @abderrahmane-tj have it right! Thanks you two. This worked perfectly, with typed interface Props {
// Just an example prop
value: boolean;
...
}
const Input = styled.input`
...
`
// The base `styled.input` can be wrapped and itself styled as many times as needed
const StyledInput = styled(Input)`
...
`
// This defines use of Props like normal, but also defines our ref
const Checkbox = (
{
value,
...rest
}: Props,
ref: React.Ref<HTMLInputElement>,
): React.ReactElement => <StyledInput ref={ref} value={value} {...rest} />
// This is the magic - you need to omit the ref from the input type here, and also include your Props
export default React.forwardRef<
HTMLInputElement,
Props & Omit<JSX.IntrinsicElements['input'], 'ref'>
>(Checkbox); |
Sometimes you need to use casts, eg: DefinitelyTyped/DefinitelyTyped#28884 (comment). This change ignores them and allows you to still omit the ref object from the deps list. Test Plan: unit tests
Currently also seeing this with
@davisk4rpi you mentioned you were able to fix this? |
Hello, did you find how to use It seems broken to me
|
Because the typing is broad, other components assigned, such as Hovering over
Note, my component doesn't allow SVGViewElement, but I guess assigning 'as' to the component infers a broad type. |
@types/styled-components
package and had problems.Definitions by:
inindex.d.ts
) so they can respond.Here is a simple repro. I can use forwarded ref on regular input, but not with styled one, it gives weird Typescript error, I am not sure what it means really.
https://codesandbox.io/s/o5ompq26j6
The text was updated successfully, but these errors were encountered: