Preact: Preact adds a new input element upon every state change

[abhisheksoni27]

I am trying to use twitter's typeahead library with Preact. But everytime the state changes, preact adds another input element to the DOM.

[marvinhagemeister]

Well that's a bit too vague. Can you share a repo or a link to codesandbox/jsfiddle/codepen where the issue can be reproduced?

[abhisheksoni27]

Hi!

Haha sorry for the vague question.

Anyway, I cannot provide you with a code example right away as I am not allowed to share it online. I'll try to make a codesandbox when I get time. Meanwhile, I can explain what I am trying to do and what I understand is going wrong:

1. There is an autocomplete input element on my page. There are a number of other complex buttons and input groups as well.

2. For this autocomplete input, I am using twitter's typeahead library.

3. In my HTML, i first load the twitter lib, then preact, and then the babelified bundle of my own source code.

4. In the MAIN (PARENT) component of my app, I have a componentDidMount method. In there, I call the Typeahead's setup code to make my autocomplete input start working. And it does! :tada:

5. Then, when I go to the next input, some state changes happen, and this autocomplete input that I was talking about earlier, gets REINSERTED into the DOM. Now, I have 2 autocomplete inputs. One works, one doesn't. The other doesn't work because componentDidMount is not called after updation and hence..

The reason why I think this happens is: Twitter's lib changes the input element into a group of two inputs, contained inside a span tag. (I don't know why they do so but they do.)

This means that when my main component rerenders, Preact diffs the new dom and old dom and finds that this old auotcomplete input element does not exist. (See how twitter changes the DOM above if this does not make sense.)

Hence, it reinserts it and makes sure the DOM looks like it should look like.

How do I tell it that this twitter lib modified the dom and I don't want it to reinsert the input element again?

[ForsakenHarmony]

link to codesandbox/jsfiddle/codepen

[abhisheksoni27]

@ForsakenHarmony Please take the time to read the Code of Conduct
of your own project and one line from my previous comment:

I'll try to make a codesandbox when I get time.

[ForsakenHarmony]

Sorry about that, didn't see that part

[pmkroeker]

Is this potentially caused by typeahead modifying the DOM, which then causes preact not to see it as the same element and cause it to render the element again? Could you wrap the input using typeahead in its own component and then set shouldComponentUpdate () { return false; } which would prevent diffing of the input element?

[marvinhagemeister]

@abhisheksoni27 the last beta release included loads of fixes related to moving from nodes around. There is a good chance that one of those fixed this issue. Can you please check again if the problem remains?

[marvinhagemeister]

Closing because of no response. Feel free to ping us to re-open the issue if the bug is still there 🙂