React-autosuggest: Bug: Autosuggest throws an exception when value is 'number'

Created on 17 Feb 2018 · 8Comments · Source: moroshko/react-autosuggest

For my form I need to pre-fill the value from server which end up as Integers.

But when I try to pass that to Autosuggest it fails, It does not have issues with String. Those work just fine

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).trim is not a function
    at Autosuggest.getQuery (Autosuggest.js:280)
    at Autosuggest.render (Autosuggest.js:497)
    at finishClassComponent (react-dom.development.js:7873)
    at updateClassComponent (react-dom.development.js:7850)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)

Source

kavink

👍12

Most helpful comment

@matheuspoleza
I got the same error and finally found out where I made an error :
My onChange function (passed via the inputProps attribute) didn't destruct the newValue from the object :
onChange = (event, { newValue }) => {...}
instead of
onChange = (event, newValue) => {...}
By setting an object (containing the newValue attribute) instead of the string, it's impossible for AutoSuggest to call the trim method on it.
Hope that helped !

In the onChange handler, I was using event.target.value to update my value. When I used the de-structured value of the second parameter (event, { newValue }), it worked. Thanks for this.

rvighnes on 15 Nov 2020

👍2 😄1

All 8 comments

Yup, I encountered the same issue.

NicoleRauch on 28 Mar 2018

@kavink @NicoleRauch Did either of you guys end up finding a way around this bug?

DanielArthurUK on 8 Aug 2018

👍1

Me too, got the same error.

paulogc on 30 Aug 2018

Seems like, the value parameter expects a string. Converting the value to a string using toString resolved the problem for me.

0004072 on 1 Oct 2018

👍3

I have the same problem trying to work with Objects, I found a solution hacking the method GetQuery from the module:
//Overide original method for internal use with object Autosuggest = function getQuery() { var inputProps = this.props.inputProps; var value = inputProps.value; var valueBeforeUpDown = this.state.valueBeforeUpDown; return value}

Basically I removed the trim at the end.

I basically need to override this method and it works. My problem is how

mirkourrunanos on 14 Nov 2018

So @mirkourrunanos did you figure it out how handle that?

matheuspoleza on 12 Apr 2019

@matheuspoleza
I got the same error and finally found out where I made an error :
My onChange function (passed via the inputProps attribute) didn't destruct the newValue from the object :

onChange = (event, { newValue }) => {...}

instead of

onChange = (event, newValue) => {...}

By setting an object (containing the newValue attribute) instead of the string, it's impossible for AutoSuggest to call the trim method on it.
Hope that helped !

bchoubert on 8 May 2019

👍2

@matheuspoleza
I got the same error and finally found out where I made an error :
My onChange function (passed via the inputProps attribute) didn't destruct the newValue from the object :
onChange = (event, { newValue }) => {...}
instead of
onChange = (event, newValue) => {...}
By setting an object (containing the newValue attribute) instead of the string, it's impossible for AutoSuggest to call the trim method on it.
Hope that helped !

In the onChange handler, I was using event.target.value to update my value. When I used the de-structured value of the second parameter (event, { newValue }), it worked. Thanks for this.

rvighnes on 15 Nov 2020

👍2 😄1

Was this page helpful?

0 / 5 - 0 ratings