Shmew/Feliz.MaterialUI

tablePagination.rowsPerPageOptions causes error

Closed this issue · 7 comments

BennieCopeland commented

Using

  • @material-ui/core: 4.11.0
  • react: 17.0.0
  • Feliz.MaterialUI: 1.2.0

My first time using table pagination with tablePagination.rowsPerPageOptions(1, 5, 7, 100) generates the following error:

"Failed prop type: Invalid prop 'rowsPerPageOptions' of type 'object' supplied to 'ForwardRef(TablePagination)', expected 'array'."

Replacing it with Interop.mkAttr "rowsPerPageOptions" [|"1"; "5"; "7"; "100"|] directly works fine.

I think the issue is caused by Fable turning the array into a Typed Array. Looking at the generated JS it shows as:
(values = new Int32Array([1, 5, 7, 100]), Object(_fable_Feliz_1_14_1_Interop_fs__WEBPACK_IMPORTED_MODULE_8__["mkAttr"])("rowsPerPageOptions", values))

cmeeren commented

For reference, here is the implementation:

static member inline rowsPerPageOptions ([<ParamArray>] values: int []) = Interop.mkAttr "rowsPerPageOptions" values

Replacing it with Interop.mkAttr "rowsPerPageOptions" [|"1"; "5"; "7"; "100"|] directly works fine.

I see that you are using strings instead of ints. Do you get the same error if you use ints in that workaround?

BennieCopeland commented

Yes. I originally tried ints but received the same error. After digging into the generated javascript I saw that Fable was using Int32Array instead of a normal JS array when using int's.

cmeeren commented

@alfonsogarciacaro Is there a simple way I can use something akin to the existing ParamArray int-based syntax (e.g. tablePagination.rowsPerPageOptions(1, 5, 7, 100)) and have this work?

alfonsogarciacaro commented

Ah, yeah, sorry, this is is always causing issues with interop. I tried to change the default in Fable 3 to not make the typed arrays conversion, but this caused other issues so I kept it as it was for Fable 2. The usual trick is to convert the array to ResizeArray to make sure is not a typed array. Like:

static member inline rowsPerPageOptions ([<ParamArray>] values: int []) = Interop.mkAttr "rowsPerPageOptions" (ResizeArray values)
cmeeren commented

Thanks! Is this also relevant for a generic 'a [] if one uses int as the generic type?

alfonsogarciacaro commented

Only if the function is inlined, if it's not, Fable will just use "normal" JS array because it doesn't know what will be in it :)

  • 👍1
cmeeren commented

Should be fixed in v1.2.5, in the pipeline now.

  • 🎉2