(fix) don't show event, slot-let, props completion in attribute value

packages/language-server/src/plugins/typescript/features/CompletionProvider.ts

@@ -23,6 +23,7 @@ import {
     mapRangeToOriginal,
     toRange
 } from '../../../lib/documents';
+import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
 import { LSConfigManager } from '../../../ls-config';
 import { flatten, getRegExpMatches, isNotNullOrUndefined, pathToUrl } from '../../../utils';
 import { AppCompletionItem, AppCompletionList, CompletionsProvider } from '../../interfaces';
@@ -164,9 +165,11 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         });
 
         const componentInfo = getComponentAtPosition(lang, document, tsDoc, position);
+        const attributeContext = componentInfo && getAttributeContextAtPosition(document, position);
         const eventAndSlotLetCompletions = this.getEventAndSlotLetCompletions(
             componentInfo,
             document,
+            attributeContext,
             wordRange
         );
 
@@ -216,17 +219,19 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         ) {
             // Very likely false global completions inside component start tag -> narrow
             const props =
-                componentInfo
-                    ?.getProps()
-                    .map((entry) =>
-                        this.componentInfoToCompletionEntry(
-                            entry,
-                            '',
-                            CompletionItemKind.Field,
-                            document,
-                            wordRange
-                        )
-                    ) || [];
+                (!attributeContext?.inValue &&
+                    componentInfo
+                        ?.getProps()
+                        .map((entry) =>
+                            this.componentInfoToCompletionEntry(
+                                entry,
+                                '',
+                                CompletionItemKind.Field,
+                                document,
+                                wordRange
+                            )
+                        )) ||
+                [];
             return CompletionList.create(
                 [...eventAndSlotLetCompletions, ...props],
                 !!tsDoc.parserError
@@ -292,12 +297,17 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
     private getEventAndSlotLetCompletions(
         componentInfo: ComponentInfoProvider | null,
         document: Document,
+        attributeContext: AttributeContext | null,
         wordRange: { start: number; end: number }
     ): Array<AppCompletionItem<CompletionEntryWithIdentifier>> {
         if (componentInfo === null) {
             return [];
         }
 
+        if (attributeContext?.inValue) {
+            return [];
+        }
+
         return [
             ...componentInfo
                 .getEvents()

packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts

@@ -212,6 +212,20 @@ function test(useNewTransformation: boolean) {
             ]);
         });
 
+        it("doesn't provide event completions inside attribute value", async () => {
+            const { completionProvider, document } = setup('component-events-completion.svelte');
+
+            const completions = await completionProvider.getCompletions(
+                document,
+                Position.create(5, 17),
+                {
+                    triggerKind: CompletionTriggerKind.Invoked
+                }
+            );
+
+            assert.deepStrictEqual(completions, null);
+        });
+
         it('provides event completions with correct text replacement span', async () => {
             const { completionProvider, document } = setup('component-events-completion.svelte');
 

packages/language-server/test/plugins/typescript/testfiles/completions/component-events-completion.svelte

@@ -3,5 +3,5 @@
     import CED from './component-events-event-dispatcher.svelte';
 </script>
 
-<CEI   on:a />
+<CEI   on:a foo="" />
 <CED   on />