Sublime Forum

HTML (React) auto-closing of tags broken by self-closing tags

#1

Hi! It seems to me like a recent release of Sublime Text has broken tag-autocomplete in a subtle way, when self-closing tags are used. Basically, if I open a tag and put a self-closing tag inside it, then try to close the outer tag, Sublime will automatically try to close the self-closing tag!

I am working on a project with many moderately complex tsx (TypescriptReact) files, and since the latest update (Build 4200), a very annoying behavior has started happening, and I can only reproduce it with a little bit of scaffolding:

const TestComponent = () => {
  return (
    <>
      {true && (
        <>
          <div>
            <span />
          </div>
          <div><span /></span>
        </>
      )}
    </>
  );
};

If you put this in a file with the TSX syntax and a .tsx file extension (for some reason I could not reproduce it without that file extension), and you remove the </span> tag and start typing </, then:

  • Expected behavior would be that Sublime would suggest or auto-close with </div>
  • Observed behavior for me on build 4200 is that Sublime auto-closes with </span> (i.e. not a suggestion that I have to accept, it just writes it out)

In the console with sublime.log_commands(True), I see command: close_tag {"insert_slash": true}.
The behavior is still there if I deactivate lsp-typescript, which is the only typescript- or react-related package I can find in my list of installed packages.

0 Likes
#2

ST doesn’t auto-close JSX tags by typing </ out of the box. Built-in close_tag command - designed for HTML/XML - fails to find matching tags as described in all ST3 and ST4 including 4200.

see: https://github.com/sublimehq/sublime_text/issues/5309

JS Custom package provides a jsx_close_tag command, which works as expected.

0 Likes