fix: formatting for chaining methods (#21027)

Closes: #20996

Author: alan-agius4

src/services/formatting/formatting.ts

@@ -484,7 +484,13 @@ namespace ts.formatting {
                 delta = Math.min(options.indentSize, parentDynamicIndentation.getDelta(node) + delta);
             }
             else if (indentation === Constants.Unknown) {
-                if (SmartIndenter.childStartsOnTheSameLineWithElseInIfStatement(parent, node, startLine, sourceFile)) {
+                if (node.kind === SyntaxKind.OpenParenToken && startLine === lastIndentedLine) {
+                    // the is used for chaining methods formatting
+                    // - we need to get the indentation on last line and the delta of parent
+                    indentation = indentationOnLastIndentedLine;
+                    delta = parentDynamicIndentation.getDelta(node);
+                }
+                else if (SmartIndenter.childStartsOnTheSameLineWithElseInIfStatement(parent, node, startLine, sourceFile)) {
                     indentation = parentDynamicIndentation.getIndentation();
                 }
                 else {
@@ -622,7 +628,7 @@ namespace ts.formatting {
             let childContextNode = contextNode;
 
             // if there are any tokens that logically belong to node and interleave child nodes
-            // such tokens will be consumed in processChildNode for for the child that follows them
+            // such tokens will be consumed in processChildNode for the child that follows them
             forEachChild(
                 node,
                 child => {

tests/cases/fourslash/formattingChainingMethods.ts

@@ -0,0 +1,37 @@
+/// <reference path="fourslash.ts" />
+
+//// z$ = this.store.select(this.fake())
+////     .ofType(
+////      'ACTION',
+////      'ACTION-2'
+////     )
+////     .pipe(
+////         filter(x => !!x),
+////         switchMap(() =>
+////          this.store.select(this.menuSelector.getAll('x'))
+////           .pipe(
+////             tap(x => {
+////             this.x = !x;
+////             })
+////           )
+////         )
+////     );
+
+format.document();
+verify.currentFileContentIs(`z$ = this.store.select(this.fake())
+    .ofType(
+        'ACTION',
+        'ACTION-2'
+    )
+    .pipe(
+        filter(x => !!x),
+        switchMap(() =>
+            this.store.select(this.menuSelector.getAll('x'))
+                .pipe(
+                    tap(x => {
+                        this.x = !x;
+                    })
+                )
+        )
+    );`
+);