Skip to content

Intellisense suggestion in Typescript after prop with literal string type #51667

@ramtinabadi

Description

@ramtinabadi

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.73.1
  • OS Version: MacOS 13.0

Steps to Reproduce:

  1. Setup typescript
  2. Create a tsx file with the following code inside:
function Person(props: {age: "old" | "middle" | "young", height: "short" | "medium" | "tall"}) {
    return <div></div>
}

function Example(props: {}) {
    return <Person 
        age='middle'
        
    />
}
  1. Go to empty line after age prop of the Person component.
  2. press ctrl + space to see the intellisense suggestions.

Here is the screenshot of the intellisense suggestion:
Screenshot 2022-11-25 at 12 28 35 PM

Explanation:
This problem happens when you have a React component in Typescript (have only used functional components against this) that has a prop whose type is a literal string.
When you add the first prop with literal string type and move to enter the second prop and enter ctrl + space, intellisense lists the literal types of prop that was entered on the line above rather than other props.
In this example, instead of showing height on the top of the list, it shows middle, old, and young which are the literal types of age prop which is already entered.
This problem is specially annoying when the entered prop has a long list of literal string types.

For reference, I have no special extension installed (in fact, the Typescript playground displays the same behavior. The following is the ts config of the current example, but have witnessed this problem in all projects:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugA bug in TypeScriptDomain: LS: Completion ListsThe issue relates to showing completion lists in an editorHelp WantedYou can do this

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions