search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
436 stars 57 forks source link

Turbo load raise error // Cannot set properties of null (setting 'innerHTML') #39

Closed jjf21 closed 2 years ago

jjf21 commented 2 years ago

Look like when turbo render a page, Coloris raise an error

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

I use CDN and init with turbo:load event

document.addEventListener("turbo:load", function() {
    Coloris({alpha: false})
});

I've tried to add a condition init

document.addEventListener("turbo:load", function() {
     if (document.querySelectorAll('[data-coloris]').length > 0) {
        Coloris({alpha: false})
     }
});

If the page is loaded with turbo I have the error, if i manually reload the page, it works

Anyone know where it could come from ? Thanks

mdbassit commented 2 years ago

Can you please share a link to your page so I can take a look?

jjf21 commented 2 years ago

Here it is: click on the "coloris page >" link on: https://cv-designerr.herokuapp.com/coloris_test

You'll have a coloris form with the error, reload manually, and Coloris will be correctly set.

It's a rails app, and pages are loaded with Turbo (https://github.com/hotwired/turbo-rails). Probably a problem with how Turbo render the page and how Coloris init the inputs.

Thanks for your help!

jjf21 commented 2 years ago

I tried to put the CDN script at the bottom of the body (was in the head), and Color picker is initialize, but the error still pop in console.

mdbassit commented 2 years ago

Turbo seems to operate by replacing the content of <body> every time the page is re-rendered (when clicking on a link for instance), which destroys the hidden color picker <div> at the bottom of the page. I don't see any simple solution for this. Maybe check if there is a way to tell Turbo to preserve some of the content of the page on re-render.

jjf21 commented 2 years ago

Solved this using the npm package "https://github.com/melloware/coloris-npm" I was unable to use it at first (https://github.com/melloware/coloris-npm/issues/59) but now it's working perfectly. Thanks for your help