React TypeScript type hint auto-completion does not work with React.forwardRef in Visual Studio Code

Question

For normal React components, I can see the correct auto-completion for component's props like this:

But I try to create a component with React.forwardRef like below, it does not work, any idea?

export default React.forwardRef<unknown, BaseModalProps & FeedbackDetailsContentProps>((props: BaseModalProps & FeedbackDetailsContentProps, ref) => {
  return (
    <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
      <FeedbackDetailsContent {...props} />
    </BaseModal>
  );
});

Answer 1

You should replace unknown with specified HTML Element type, eg. HTMLInputElement, and also type specified for props is unnecessary.

Answer 2

Actually, your issue isn't related to VSCode, I mean programming issues, especially the development area isn't related to Editor/IDE at all.

Let's code like this:

type ModalProps = BaseModalProps & FeedbackDetailsContentProps;

const Modal = (props: ModalProps, ref: any) => (
  <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
    <FeedbackDetailsContent {...props} />
  </BaseModal>
);

export default React.forwardRef<unknown, ModalProps>(Modal);

Answer 3

• You don't have to supply types two times. When you already specified types for generic (within <>), you don't have to type the arguments to forwardRef explicitly
• Most probably you would associate ref to the button inside BaseModal so the type can be HTMLButtonElement instead of unknown. That let's typescript infer types

export default React.forwardRef<HTMLButtonElement, BaseModalProps & FeedbackDetailsContentProps>((props, ref) => {
  return (...);
});

OR

export default React.forwardRef< BaseModalProps & FeedbackDetailsContentProps>(
(
  props: BaseModalProps & FeedbackDetailsContentProps, 
  ref: ForwardedRef<HTMLButtonElement>
) => {
  return (...);
});

Answer 4

I used to catch ref with forwardRef, in the Child Component before, when passed TextInput Ref to child Component. But Here I am not using forwardRef in the Child Component, Although I have imported. I am using the latest React and React Native packages.

    import React, {forwardRef} from "react";
    
    export interface TextInput_Write_A_Comment_In_Comment_Props{
    
        t_Width: number,
        t_Height: number,
        onChange__Comments:(some_input_string:string)=>void
        comment_post:()=>void,
        android_KeyBoard_Focused__onPressIn__testing_1:(nativeEvent: any)=>void,
        TextInput_commentRef:  React.RefObject<TextInput>,
    
    }
    
    const TextInput_Write_A_Comment_In_Comment: React.FC<TextInput_Write_A_Comment_In_Comment_Props> = (
        props: TextInput_Write_A_Comment_In_Comment_Props,
        )=> {
    
        const Text_Input__Editing_comment_State: string = useAppSelector(editing__comment_string_for_Tagging);
    
        return (
    
            <View style={{
                flexDirection: 'column',
                height: props.t_Height/12,
                width:  props.t_Width,
            }}>
                <View style={{
                //    ----__-_-whatever----__-_-
                }}>
    
    
    
                    <TextInput
    
                        style={{
                            ...TextInput_Write_A_Comment_In_Comment_Styles.commentInput,
                            color: 'black',
                        }}
                        placeholder="Write a comment..."
                        autoFocus={false}
    
                        ref = {props.TextInput_commentRef}
    
                        onSubmitEditing= {Keyboard.dismiss}
    
                        autoCapitalize="none"
                        keyboardType="default"
    
                        onChangeText= {(feedTextInputValue: string) => props.onChange__Comments(feedTextInputValue)}
    
                        value= {Text_Input__Editing_comment_State}
    
                        onPressIn= {props.android_KeyBoard_Focused__onPressIn__testing_1}
                        maxLength={244} //250 ,244 otherwise may not invoke the alert message.
                        
                    />
    
                    <View style={{
                         //    ----__-_-whatever----__-_-
    
                    }}
                    >
                        <TouchableOpacity
                            onPress={ () => Alert.alert('not implemented yet')}>
                            <Icon
                                size={40}
                                style= {TextInput_Write_A_Comment_In_Comment_Styles.selected_Items_Button_Text} name={'ios-attach'}/>
                        </TouchableOpacity>
                    </View>
    
    
                    <View style={{
                         //    ----__-_-whatever----__-_-
    
                    }}
                    >
                        <TouchableOpacity
                            onPress={()=>props.comment_post()}
                            style={TextInput_Write_A_Comment_In_Comment_Styles.rounded_back_groud}
                        >
                            <MTI
                                size={45}
                                style={{
                                    color: 'white',
                                    textAlign: 'left',
                                    alignSelf: 'stretch',
                                    fontSize: 40
                                }}
                                name={'send-circle'}
                            />
                        </TouchableOpacity>
                    </View>
    
                </View>
    
            </View>
    
        );
    };
    
    
    const TextInput_Write_A_Comment_In_Comment_Styles = StyleSheet.create({
    
        // ......
    
    });
    
    export default TextInput_Write_A_Comment_In_Comment;