JSX Indentation Failing

[bieber]

I'm finding that attributes don't line up properly in multi-line JSX attributes in jsx or tsx files. I have web-mode-attr-indent-offset set to 4, which should render as a tab character. What actually ends up happening is something like this:

function x() {
    const good = (
        <div
            attr={3}
            otherattr={5}>
            wat
        </div>
    );
    const bad = (
        <CustomComponent
        attr={5}
        otherattr={3}
        />
    );
    const badish = (
        <CustomComponent with
            multiple attributes
            per line somehow
            works
            until
            you
            include
            an={sign}
        and then it's
            back to unindented until
            you have another multi-attr line
        />
    );
}

It seems that

1. Elements that start with a lowercase letter indent properly. I thought this was limited to built-in elements at first but it seems to work with anything with a non-capitalized name
2. For capitalized names, it doesn't indent attributes on following lines, unless...
3. there is more than one attribute (or a single attribute + the component name) on the preceeding line

[wojtekgalaj]

You might want to give rjsx mode a go.

https://github.com/felipeochoa/rjsx-mode

[UwUnyaa]

rjsx-mode won't work with .tsx files, so this bug is still relevant for those who use TypeScript.