No auto-closing div tag when nested in li and another div

[KyleCrawford]

TS Template added by @mjbvz

TypeScript Version: 4.4.2

Search Terms

• jsx
• react

---

Issue Type: Bug

The issue is the auto closing tags for HTML/JSX. When nesting a div inside of another div nested in a li, the second div closing tag will not auto complete eg. A React component (a .js file) that has the following code.

const Component = props => {
    return (
        <li>
            <div>
                <div>**** this is where the closing tag will not auto complete, all other auto closing tags work fine.
            </div>
        </li>
    )};

This is reproducable. Doesn't seem to happen when not in a li tag

VS Code version: Code 1.60.0 (e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff, 2021-09-01T10:41:52.311Z) OS version: Windows_NT x64 10.0.19043 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|AMD Ryzen 9 5900X 12-Core Processor (24 x 3693)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|31.92GB (24.79GB free)| |Process Argv|C:\\Users\\Kyle Crawford\\Documents\\GitHub\\ReactProjects\\Practice Food Order - Solution --crash-reporter-id 15208107-a4b6-4d32-b4b3-dde3609acf4d| |Screen Reader|no| |VM|0%|

Extensions: none

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383:30185418 pythonvspyt602:30300191 vspor879:30202332 vspor708:30202333 vspor363:30204092 pythonvspyt639:30300192 pythontb:30283811 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 pythondataviewer:30285071 pythonvsuse255:30340121 vscod805:30301674 pythonvspyt200:30340761 vscextlangct:30333562 binariesv615:30325510 pythonvssor306:30344512 bridge0708:30335490 pygetstartedc2:30360494 bridge0723:30353136 pythonf5test824cf:30361778 javagetstartedc:30351792 vsdyn321cf:30356811 pythonvspyt187:30362782 pydsgsc2:30361791 vscus224:30358039 vssid140:30362080 ```

[IllusionMH]

Tags are lost in your message at this moment - please wrap your code sample in code block as shown below.

code

[aeschli]

Note that HTML and JSX are different language servers. I verified that auto closing the <div> in your example code works when in a HTML editor but I can reproduce in TSX.

[mjbvz]

Possibly a duplicate of #28541

[andrewbranch]

I can’t reproduce this. Works for me in both TS and JS with the latest TS version and a random sampling of older TS versions.

@KyleCrawford any additional info you can provide on how to reproduce?

[IllusionMH]

@andrewbranch I guess it's for case when you type > for opening tag, not for trigger suggestions manually

you type <li first time and then type > editor adds </li> you type <div first time and then type > editor adds </div> for you But when you try to add another nested div - type <div then > editor no longer adds </div>. If instead of <div you type <span and > - editor will add </span>

Looks like TS sees that there is closing </div> even if it's not intended for newly typed tag - it won't add closing tag automatically.

[andrewbranch]

Oh, I’ve had auto closing tags disabled forever, so I had no idea what was expected here. Thanks @IllusionMH.

[hi-ogawa]

I haven't dig into the actual code yet, but I ran git-bisect and found a commit causing this regression, so I'll report it here. I hope it will be helpful.

First of all, this bug can be reproduced with a fourslash test like this:

• tests/cases/fourslash/autoCloseTagCrash.ts

/// <reference path='fourslash.ts' />

// @Filename: /0.tsx
////const x = <li>
////    <div>
////        <div>/*0*/
////    </div>
////</li>

verify.jsxClosingTag({
    0: { newText: "</div>" },
});

This test succeeds on v4.3.5 but fails on main branch and you'll see a similar stacktrace as the issue reported from telemetry https://github.com/microsoft/TypeScript/issues/45636

  1) fourslash tests
       tests/cases/fourslash/autoCloseTagCrash.ts
         fourslash test autoCloseTagCrash.ts runs correctly:
     Error: Debug Failure. Did not expect JsxElement to have an Identifier in its trivia
      at addSyntheticNodes (src/services/services.ts:177:27)
      at processNode (src/services/services.ts:149:13)
      at visitNode (src/compiler/parser.ts:39:24)
      at Object.forEachChild (src/compiler/parser.ts:449:21)
      at NodeObject.forEachChild (src/services/services.ts:129:20)
      at createChildren (src/services/services.ts:164:14)
      at NodeObject.getChildren (src/services/services.ts:100:56)
      at find (src/services/utilities.ts:1210:32)
      at find (src/services/utilities.ts:1246:32)
      at find (src/services/utilities.ts:1246:32)
      at find (src/services/utilities.ts:1246:32)
      at find (src/services/utilities.ts:1246:32)
      at find (src/services/utilities.ts:1246:32)
      at find (src/services/utilities.ts:1246:32)
      at Object.findPrecedingToken (src/services/utilities.ts:1201:24)
      at Object.getJsxClosingTagAtPosition (src/services/services.ts:2080:27)
      at Function.proxy.<computed> [as getJsxClosingTagAtPosition] (src/harness/fourslashImpl.ts:397:66)
      at TestState.verifyJsxClosingTag (src/harness/fourslashImpl.ts:3179:53)
      at VerifyNegatable.jsxClosingTag (src/harness/fourslashInterfaceImpl.ts:179:24)
      at eval (autoCloseTagCrash.js:8:8)
      at runCode (src/harness/fourslashImpl.ts:4074:13)
      at runFourSlashTestContent (src/harness/fourslashImpl.ts:4033:9)
      at Object.runFourSlashTest (src/harness/fourslashImpl.ts:4017:9)
      at Context.<anonymous> (src/testRunner/fourslashRunner.ts:57:43)
      at processImmediate (node:internal/timers:464:21)

Then, I made a simple bash script for git-bisect like this:

• test.sh

#!/bin/bash

npm i && git restore package-lock.json && npx gulp runtests --no-lint -r spec -t "autoCloseTagCrash" || exit 1

And ran git-bisect:

git bisect start main v4.3.5 --
git bisect run bash test.sh

and found this commit https://github.com/microsoft/TypeScript/commit/89a737c871fca68bd53c2a0aa387acd591153006 and its corresponding PR https://github.com/microsoft/TypeScript/pull/43780.

~I will spend some time to try to understand the PR, but it looks a bit complicated, so probably I won't be able to provide a fix for it...~

EDIT: I made a PR to address this issue. I would appreciate if someone could take a look at it. Thanks!

[andrewbranch]

Excellent detective work, @hi-ogawa 🕵️