Bad formatting when using elmish style + empty arrays

[alarbada]

Issue created from fantomas-online

Code

[<ReactComponent>]
let Dashboard () =
    Html.div [
        Html.div []
        Html.div [
            Html.text "hola muy buenas"
        ]
    ]

Result

[<ReactComponent>]
let Dashboard () =
    Html.div [
        Html.div [
            ]
        Html.div [
            Html.text "hola muy buenas"
        ]
    ]

Problem description

Well, I couldn't exactly reproduce the bug I had in #ionide/ionide-vscode-fsharp#1505, but testing it I found a smaller one.

The div with an empty list is not correctly formatted. In the issue I just mentioned I had even worse results, fantomas adding new lines each time I reformated the document. I could work around it adding a null or not using empty arrays.

I'd expect a result like this:

[<ReactComponent>]
let Dashboard () =
    Html.div [
        Html.div [
        ] <-- changed
        Html.div [
            Html.text "hola muy buenas"
        ]
    ]

Or this:

[<ReactComponent>]
let Dashboard () =
    Html.div [
        Html.div [] <-- for an empty array no need to add another line
        Html.div [
            Html.text "hola muy buenas"
        ]
    ]

Options

Fantomas Master at 03/06/2021 17:13:59 - f828c65

    { config with
                RecordMultilineFormatter = number_of_items
                MaxArrayOrListWidth = 20
                MaxElmishWidth = 10
                SingleArgumentWebMode = true
                MultiLineLambdaClosingNewline = true }

_{Did you know that you can ignore files when formatting from fantomas-tool or the FAKE targets by using a .fantomasignore file?}