yuanqing/autosize-input

Turbolinks compatibility

Closed this issue · 9 comments

pomartel commented

When the library first loads, it creates a ghost div that is appended to the dom. This makes the library incompatible with Turbolinks which reloads the dom on each request.

Would it be possible to initialize the ghost div inside the autosizeInput function or create some sort of initializer that can be called to create the ghost div?

twolfson commented

Another option would be to check ghostDiv.parentNode and if it's null, then it will re-initialize itself

yuanqing commented

This issue has been addressed with autosize-input@0.3.0

twolfson commented

As a heads up, this issue is still open. Based on your comment and the PR, it can probably be closed

pomartel commented

I just tested the refactored 0.3.0 version and it does not work with Turbolinks. I am not sure parentNode returns false after the dom has been reloaded.

yuanqing commented

@pomartel

  1. Can you provide a simple JSFiddle that simulates what happens when Turmolinks “reloads the DOM”? I tested the refactored solution manually by removing the ghost node from the DOM, and checking that the ghost node is indeed recreated when typing into the autosized input box.
  2. node.parentNode does return null after doing document.body.innerHTML = '';. See this JSFiddle: https://jsfiddle.net/46a4eszb/
pomartel commented

So here is the fiddle using parentNode: https://jsfiddle.net/gkwew38y/5/
The parentNode doesn't return null after page is replaced by Turbolinks.

And here is a second fiddle using getElementById instead: https://jsfiddle.net/1vv7mx55/1/
The div is no longer present in the DOM after Turbolinks replaces the page.

twolfson commented

Ooohh, it looks like turbolinks replaces the body element altogether so any child nodes of body will have a reference but body.parentNode would be null (as opposed to document.documentElement -- i.e. <html> tag)

https://github.com/turbolinks/turbolinks/blob/v5.0.0/src/turbolinks/snapshot_renderer.coffee#L60-L61

That's what I get for assuming things about the implementation. Sorry folks =/

  • 👍1
yuanqing commented

@pomartel @twolfson

Thank you all for clearing that up. I’ve released a 0.3.1 that reverts to using the getElementById technique to check if the ghost element still exists in the DOM.

pomartel commented

Just tested it and it works great. Thanks for your support!