problem with Controls.TabsList

[Mario Scappaticci]

Hi to all,

this is my simple code:

let SignupSequence =
let ctrl =
let inp =
Controls.Input ""
|> Formlet.MapBody (fun arg ->
let par = P [Text "paragraph"]
arg.Element.Append(par.Dom).Ignore
arg
)
[("tab",inp)] |> Controls.TabsList

I can't understand why the paragraph is shown twice.

thanks for help

[Joel Björnson]

Hi Mario,

The reason why the paragraph is added twice is  because the map function is called twice and performs the appending both times. At the moment, I can't tell you exactly why the 'Controls.TabsList' causes this behavior, but I consider it a bug. The simplest workaround is to use the 'Formlet.ApplyLayout' combinator as in:

    [<JavaScript>]

    let Ctrl () =

        let inp =

            Controls.Input ""

             |> Formlet.MapBody (fun arg ->

                    let par = P [Text "paragraph"]

                    arg.Element.Append(par.Dom)

                    arg

                 )

            |> Formlet.ApplyLayout

        [("tab", inp)]

        |> Controls.TabsChoose 0

The combinator groups the stream of body elements. Also, instead of using DOM manipulation to attach the paragraph, consider using MapElement as in:

    [<JavaScript>]

    let Ctrl () =

        let inp =

            Controls.Input ""

            |> Formlet.MapElement (fun el ->

                Div [

                    el

                    P [Text "Paragraph"]

                ]

            )

            |> Formlet.ApplyLayout

        [("tab", inp)]

        |> Controls.TabsChoose 0

Cheers,

Joel