Invalid values added to autocomplete for tsx components with number or string literal typings

[marbemac]

Using properties in tsx components whos typing is a literal string, number, or union, results in all of those values being added to the top of autocomplete suggestions.

Code sandbox example: https://codesandbox.io/s/tsx-props-union-type-autocomplete-bug-z740bd?file=/src/App.tsx

Code:

interface CompBProps {
  name?: string;
  propA?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
}

const CompB = (props: CompBProps) => <div />;

export default function CompA() {
  return <CompB propA="1"  />;
}

Autocomplete works as expected if triggered before the prop:

If triggered after any props with literal types, all of those values are included in the autocomplete (and actually selecting any of these suggestions results in broken code).

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

• VS Code Version: 1.78.0-insider and 1.77.3
• OS Version: OSX 13.1

Steps to Reproduce:

1. Create a .tsx file (I have tested in react and solidjs projects, doesn't seem to matter)
2. Define a component (CompA) that accepts a prop (propA) that is a string or number literal (or union type)
3. In a separate component (CompB), use (CompA). Note that before adding (propA), the autocomplete suggestions work as expected.
4. Set (propA), note now how triggering autocomplete after (propA) includes all of the possible values from (propA). Triggering autocomplete before (propA) still works as expected.

[Andarist]

This was already fixed by #52676 so 5.1 doesn't suffer from it.

[marbemac]

Can confirm, fixed in 5.1 🎉.