[help] not working with typed.js

[cyrilchapon]

When integrated with react-typed component, this throws an error, when selecting a suggestion, at the time the input should be re-focused

Cannot read property 'focus' of undefined

On this line

• Working with a simple wrapper div : https://codepen.io/anon/pen/EoBZrR
• Not working when wrapped inside a react-typed component : I did not manage to import react-typed inside codepen to demonstrate

npm install --save react-typed

Import Typed component

import Typed from 'react-typed'

then replace readerInputComponent with the following

                        renderInputComponent={(inputProps) => {
                          return (
                            <Typed 
                              strings=[
                                'This is an example'
                              ]
                              attr="placeholder"
                              loop
                            >
                              <input
                                {...inputProps}
                              />
                            </Typed>
                          )
                        }}

Steps

1. Focus on the input field
2. Type c, and wait for suggestions to appear
3. Choose a suggestion by clicking on it
4. Observe console

Observed behaviour: Input keeps blurred and an error is thrown

Expected behaviour: Input should be re-focused

---

I am aware this is not a trouble with the library itself, but I'm posting here to get help :)

I tried to digg into the lib to see what happens :

• this.input here is undefined
• it should be set by this line this.input = this.autowhatever.input

Which lead me to https://github.com/moroshko/react-autowhatever

I'm lost at this point

[cyrilchapon]

I succeeded at isolating the trouble : Not confident with react-typed implementation, I reimplemented it myself.

It seems that the fact to React.cloneElement the input, inside a custom component wrapping it, reproduces the bug.

I suspected this was about ref overriding, but it still throws the same even with just React.cloneElement(/*the input*/)

[Usohps]

I still have issue deploying on vercel. Could there be a package that replaces the react-typed