reasonml-community / bs-downshift Goto Github PK

react-dom.development.js:9627 The above error occurred in the <Downshift> component:
    in Downshift (created by GroupsList)
    in div (created by GroupsList)
    in GroupsList (created by Popup)
    in div (created by ViewWrapper)
    in ViewWrapper (created by Popup)
    in div (created by Popup)
    in Popup (created by App)
    in App

Uncaught TypeError: t.extGetItemProps is not a function
    at Array.getItemProps (Downshift.bs.js:13)
    at eval (GroupsList.bs.js:113)
    at Object._2 (curry.js:127)
    at Object.mapi (array.js:122)
    at eval (GroupsList.bs.js:111)
    at Downshift.render (downshift.esm.js:856)
    at finishClassComponent (react-dom.development.js:8377)
    at updateClassComponent (react-dom.development.js:8345)
    at beginWork (react-dom.development.js:8966)
    at performUnitOfWork (react-dom.development.js:11798)

It can't seem to find

When I look at the t argument in the console it contains these methods:

[
"getRootProps",
"getButtonProps",
"getLabelProps",
"getInputProps",
"getItemProps",
"reset",
"openMenu",
"closeMenu",
"toggleMenu",
"selectItem",
"selectItemAtIndex",
"selectHighlightedItem",
"setHighlightedIndex",
"clearSelection",
"clearItems",
"setItemCount",
"unsetItemCount",
"itemToString",
"id",
"highlightedIndex",
"inputValue",
"isOpen",
"selectedItem"
]

Hi! First off, thanks a ton for writing this. I've been using it to implement a dropdown in ReasonML and it's been great - I've actually learned a ton about writing bindings from looking at the code!

I discovered an issue with the way itemPropsOptions is defined. As it is, index is defined as option(int). When this gets compiled to JS, the result is that the index gets wrapped in an array, and that's what gets passed to the JS Downshift method getItemProps. Downshift itself doesn't type check this value at all, it just trusts that its an int, and uses it as such. When that item gets hovered, the internal state is updated with that item's index... which now gets set as an array containing an int instead of just an int.

Then, highlightedIndex is typed as a Js.Nullable.t(int). Since that's not compatible with the actual highlightedIndex that's getting passed in from Downshift, you can't actually ever check to see if the current item's index matches highlightedIndex.

I can think of a couple of different ways to fix this, which I'll list below. I'm happy to make the change and submit a PR, but I wanted to run the approach past you first!

Option 1: Js.Nullable

One option would be to change the type to be as follows:

type itemPropsOptions = {
  .
  "index": Js.Nullable.t(int),
  "item": any
};

This ensures we're actually passing an int to Downshift, and keeps the sprit of the option without changing too much. I've made this change on my own and confirmed it works with my code.

Option 2: Pass options as labeled arguments

This would break with the way you're exposing the external methods directly, but you could write a new method for getItemProps like this:

let getItemProps = (t, ~item:any, ~index=?, ()) : any => {
    let itemPropsOpt = {
      "item": item,
      "index": Js.Nullable.from_opt(index)
    };
    externalGetItemProps(t, itemPropsOpt);
  };

The advantage of that approach is it feels more in the spirit of the actual API where index is optional. You'd also need to make the same change as in Option 1 to reflect that index was potentially null.

Let me know your thoughts on how best to proceed and, like I said, I'd be happy to submit a PR with the preferred approach! Thanks again!