Lists passed through FunctionComponent.Of() upsets _createForOfIteratorHelper

[davedawkins]

I'm trying to integrate with reactjs-autocomplete.

If I use the direct integration (autocomplete in module AutoComplete below), it kind of works. The things that don't seem to work so well may work better when it's mounted as a FunctionComponent (using autocompleteF in the same module).

However, the props list now throws a runtime TypeError at the call to keyValueList, and I can't see why. You can still take the head/tail, and the same call to keyValueList works just fine when called from the plainer autocomplete.

Uncaught TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    _createForOfIteratorHelper Util.js:140
    createObj Util.ts:520
    autocompleteF AutoComplete.fs:20

module AutoComplete

open Fable.React
open Fable.Core.JsInterop
open Fable.Core
open Browser

type AutoCompleteProps<'T,'V> = 
  | Items of 'T array
  | RenderItem of ('T -> ReactElement)
  | Value of 'V
  | GetItemValue of ('T -> 'V)
  | OnChange of (Browser.Types.Event -> string -> unit)
 
let inline autocomplete (props : AutoCompleteProps<'T,'V> list) : ReactElement =
    let propsObj = (keyValueList CaseRules.LowerFirst props)
    ofImport "default" "react-autocomplete" propsObj []

let autocompleteF<'T,'V>  =
    FunctionComponent.Of(fun (props : AutoCompleteProps<'T,'V> list) -> 
        let propsObj = (keyValueList CaseRules.LowerFirst props)
        div [] [ 
            ofImport "default" "react-autocomplete" propsObj []
            str "autocomplete" 
        ]
    )

This is how the call to autocompleteF is defined

              div [] [
                AutoComplete.autocompleteF [
                  Items [| { Label = "HelloX" }; { Label = "WorldX" } |]
                  Value "HelloX"
                  RenderItem (fun item -> div [] [ str item.Label ])
                  GetItemValue (fun item -> item.Label)
                  //OnChange (fun e v -> Select v |> dispatch)
                ]
              ]

[davedawkins]

Here's a workaround, in the form of makeList. Weird that it fixes things, but I think some magic/metadata has been lost from props after being passed through ReactJS

// Duplicates list-like object to give it back iteration capability
// Workaround for issue logged against fable react
let rec makeList list = 
    match list with
    | [] -> []
    | x::xs -> x :: (makeList xs)

let autocompleteF2<'Item>  =
    FunctionComponent.Of( (fun (props : AutoCompleteProps<'Item> list) -> 
        let propsObj = (keyValueList CaseRules.LowerFirst (makeList props))

        propsObj?menuStyle <- keyValueList CaseRules.LowerFirst menuStyle

        div [] [ 
            ofImport "default" "react-autocomplete" propsObj []
        ]
    ), "autocompleteView", memoEqualsButFunctions)