React-bootstrap-typeahead: Pagination item not compatible with `labelKey` callback

[abdulrahman-khankan]

Version

3.0.4

Steps to reproduce

Use with options objects array larger than 100 (to trigger pagination) and use labelKey as labelKey={option => option.value}

Expected Behavior

Work properly

Actual Behavior

Crash

Uncaught Error: One or more options does not have a valid label string. Check the labelKey prop to ensure that it matches the correct option key and provides a string for filtering and display.

Further notes

It works with version ~2.3.0~ 2.6.0

Case 1: When I use labelKey={"value"} it works fine.

Case 2: When I use labelKey={option => `${option.value}`} it doesn't crash anymore, but when scrolling to the bottom, instead of "Display additional results..." I see "undefined", and when clicking on it, it loads more results as intended. In this case, passing paginationText has no effect, it keeps showing "undefined" (tried both passing string and paginationText={{ value: "Display additional results..." }})

For now I will either disable pagination as the label isn't always on top level of the object to use labelKey as in case 1, or revert back to ~2.3.0~ 2.6.0 until this is fixed 😕 hopefully it's easy to fix.

And btw, thanks for all the work and effort put into making this package!

[ericgio]

@abdulrahman-khankan: Thanks for the detailed report, I can reproduce the issue.

[ericgio]

This should be fixed as of v3.1.0.

[abdulrahman-khankan]

@ericgio Could you please double check v3.1.0 on npm? Trying to install it and seems to be missing the src files.

https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.1.0.tgz has no src files.

[ericgio]

You're right, it looks like npm didn't include the files in the package. This has happened a couple times before and I have no idea why. Will try to release a patch that should hopefully fix the issue.

[ericgio]

Looks like it's all there in v3.1.1. Sorry about that!

[abdulrahman-khankan]

Works great, thank you!