Skip to content

Generic react component (TSX) and intellisense not working #34110

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

Closed
mjbvz opened this issue Oct 13, 2019 · 1 comment · Fixed by #34958
Closed

Generic react component (TSX) and intellisense not working #34110

mjbvz opened this issue Oct 13, 2019 · 1 comment · Fixed by #34958
Assignees
Labels
Bug A bug in TypeScript Domain: Completion Lists The issue relates to showing completion lists in an editor Fix Available A PR has been opened for this issue

Comments

@mjbvz
Copy link
Contributor

mjbvz commented Oct 13, 2019

from microsoft/vscode#82276

TypeScript Version: 3.7.0-dev.20191011

Search Terms:

  • completions / suggestions
  • react

Code
For a simple typescript react file:

import * as React from 'react';

type Props = {
    name: string;
    isActive: boolean;
};

export const CustomComponent = <T extends {}>(props: Props) => {
    return <React.Fragment>{props.name}</React.Fragment>;
};

export const TestComponent = () => {
    return (
        <CustomComponent<string> |>
            <div></div>
        </CustomComponent>
    );
};
  1. Place cursor at | in <CustomComponent<string>
  2. Trigger completions

Expected behavior:
Completions for name and isActive returned

Actual behavior:
No completions are returned.

If you add a property such as isActive={true}, then a completion for name is returned

@varemenos
Copy link

varemenos commented Feb 19, 2023

A friend of mine recently tried using JSX generics and it seems like the fix in #34958 did not work for them.

Here is an oversimplified code snippet that replicates the issue. We've tried this in two different machines and neither worked:

import * as React from "react"

type Variations = "hello" | "baaaaa" | "click"

const MyGeneric = <T extends Variations>({  }) => {
  return <div></div>
}

const Issue = () => {
  return <MyGeneric<"ctrl+space should bring up suggestions here">></MyGeneric>
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Domain: Completion Lists The issue relates to showing completion lists in an editor Fix Available A PR has been opened for this issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants