Fixing import completion spans to only include the end of the directory fragment

src/services/services.ts

@@ -4518,7 +4518,7 @@ namespace ts {
                 let result: ImportCompletionEntry[];
 
                 // Replace the entire text of the string literal (excluding the quotes)
-                const span: TextSpan = { start: node.getStart() + 1, length: literalValue.length };
+                const span: TextSpan = getDirectoryFragmentTextSpan(literalValue, node.getStart() + 1);
 
                 const isRelativePath = startsWith(literalValue, ".");
                 const scriptDir = getDirectoryPath(node.getSourceFile().path);
@@ -4792,15 +4792,16 @@ namespace ts {
                     const kind = match[2];
                     const toComplete = match[3];
 
-                    const span: TextSpan = { start: range.pos + prefix.length, length: match[0].length - prefix.length };
-
                     const scriptPath = getDirectoryPath(sourceFile.path);
                     if (kind === "path") {
                         // Give completions for a relative path
+                        const span: TextSpan = getDirectoryFragmentTextSpan(toComplete, range.pos + prefix.length);
                         return getCompletionEntriesForDirectoryFragment(toComplete, scriptPath, getSupportedExtensions(program.getCompilerOptions()), /*includeExtensions*/true, span);
                     }
                     else {
                         // Give completions based on the typings available
+                        // Replace the entire string
+                        const span: TextSpan = { start: range.pos + prefix.length, length: match[0].length - prefix.length };
                         return getCompletionEntriesFromTypings(host, program.getCompilerOptions(), scriptPath, span);
                     }
                 }
@@ -4952,6 +4953,14 @@ namespace ts {
             function createCompletionEntryForModule(name: string, kind: string, span: TextSpan): ImportCompletionEntry {
                 return { name, kind, sortText: name, span };
             }
+
+            // Replace everything after the last directory seperator that appears
+            // FIXME: do we care about the other seperator?
+            function getDirectoryFragmentTextSpan(text: string, textStart: number): TextSpan {
+                const index = text.lastIndexOf(directorySeparator);
+                const offset = index !== -1 ? index + 1 : 0;
+                return { start: textStart + offset, length: text.length - offset }
+            }
         }
 
         function getCompletionEntryDetails(fileName: string, position: number, entryName: string): CompletionEntryDetails {

tests/cases/fourslash/completionForStringLiteralImport1.ts

@@ -1,19 +1,31 @@
 /// <reference path='fourslash.ts' />
 
+// @typeRoots: my_typings
+
 // @Filename: test.ts
-//// import * as foo0 from  "[|./some|]/*0*/
-//// import foo1 = require( "[|./some|]/*1*/
-//// var foo2 = require(    "[|./some|]/*2*/
-
-//// import * as foo3 from  "[|./some|]/*3*/";
-//// import foo4 = require( "[|./some|]/*4*/";
-//// var foo5 = require(    "[|./some|]/*5*/";
+//// import * as foo0 from  "./[|some|]/*0*/
+//// import * as foo1 from  "./sub/[|some|]/*1*/
+//// import * as foo2 from  "[|some-|]/*2*/"
+//// import * as foo3 from  "../[||]/*3*/";
 
 
-// @Filename: someFile.ts
-//// /*someFile*/
+// @Filename: someFile1.ts
+//// /*someFile1*/
 
-for (let i = 0; i < 6; i++) {
-    goTo.marker("" + i);
-    verify.importModuleCompletionListContains("someFile", i);
-}
+// @Filename: sub/someFile2.ts
+//// /*someFile2*/
+
+// @Filename: my_typings/some-module/index.d.ts
+//// export var x = 9;
+
+goTo.marker("0");
+verify.importModuleCompletionListContains("someFile1", 0);
+
+goTo.marker("1");
+verify.importModuleCompletionListContains("someFile2", 1);
+
+goTo.marker("2");
+verify.importModuleCompletionListContains("some-module", 2);
+
+goTo.marker("3");
+verify.importModuleCompletionListContains("fourslash/", 3);

tests/cases/fourslash/completionForStringLiteralImport2.ts

@@ -3,15 +3,18 @@
 // @typeRoots: my_typings
 
 // @Filename: test.ts
-//// /// <reference path="[|./some|]/*0*/
+//// /// <reference path="./[|some|]/*0*/
 //// /// <reference types="[|some|]/*1*/
 
-//// /// <reference path="[|./some|]/*2*/" />
+//// /// <reference path="./sub/[|some|]/*2*/" />
 //// /// <reference types="[|some|]/*3*/" />
 
 // @Filename: someFile.ts
 //// /*someFile*/
 
+// @Filename: sub/someOtherFile.ts
+//// /*someOtherFile*/
+
 // @Filename: my_typings/some-module/index.d.ts
 //// export var x = 9;
 
@@ -22,7 +25,7 @@ goTo.marker("1");
 verify.importModuleCompletionListContains("some-module", 1);
 
 goTo.marker("2");
-verify.importModuleCompletionListContains("someFile.ts", 2);
+verify.importModuleCompletionListContains("someOtherFile.ts", 2);
 
 goTo.marker("3");
 verify.importModuleCompletionListContains("some-module", 3);