diff --git a/src/services/completions.ts b/src/services/completions.ts index bf3432a44cf49..23722e43224e4 100644 --- a/src/services/completions.ts +++ b/src/services/completions.ts @@ -739,10 +739,22 @@ namespace ts.Completions { } } + // Before offering up a JSX attribute snippet, ensure that we aren't potentially completing + // a tag name; this may appear as an attribute after the "<" when the tag has not yet been + // closed, as in: + // + // return <> + // foo + // + // We can detect this case by checking if both: + // + // 1. The location is "<", so we are completing immediately after it. + // 2. The "<" has the same position as its parent, so is not a binary expression. const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location); if ( kind === ScriptElementKind.jsxAttribute - && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos) // Disable snippet for the first attribute, which is actually the tag name. + && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos) && preferences.includeCompletionsWithSnippetText && preferences.jsxAttributeCompletionStyle && preferences.jsxAttributeCompletionStyle !== "none") {