Combobox

open FS.FluentUI.V8toV9

[<ReactComponent>]
let ComboBoxTest() =
    let seletedOptions, setSelectedOptions = React.useState([| |])
    let options = ["Cat"; "Dog"; "Ferret"; "Fish"; "Hamster"; "Snake"]
    Fui.stack [
        stack.horizontal false
        stack.children [
            Fui.label [
                label.id "comboBoxId"
                label.text "Best Pets"
            ]
            Fui.combobox [
                combobox.ariaLabelledBy "comboBoxId"
                combobox.multiselect true
                combobox.positioning.afterTop
                combobox.positioning [
                    positioning.offset [
                        offset.crossAxis 50
                        offset.mainAxis 50
                    ]
                ]
                combobox.defaultSelectedOptions seletedOptions
                combobox.placeholder "Select one or more animals"
                combobox.onOptionSelect (fun (d: OptionOnSelectData) -> setSelectedOptions d.selectedOptions)
                combobox.children (
                    options |> List.map (fun (o: string) ->
                        Fui.option [
                            option.key o
                            option.disabled (if o = "Ferret" then true else false)
                            option.value o
                            option.children [
                                Fui.text o
                            ]
                        ]
                    )
                )
            ]
            Fui.stack [
                stack.horizontal true
                stack.children [
                    Fui.text "Chosen pets: "
                    Fui.text (seletedOptions |> String.concat ", ")
                ]
            ]
        ]
    ]