Unable to initialize Coloris

[FMaz008]

I have a browser extension in which I'm trying to use coloris for pages which are dynamically generated. (Understand: things are created after the DOM is loaded).

So far I have implemented it like this:

<link rel="stylesheet" type="text/css" href="../page/coloris.css" />
<script src="../page/coloris.js" data-no-auto></script>

Then in my code, after all the page element are generated, I do:

Coloris({
		el: ".color-picker",
	});

The results are that the color fields get their little color swash next to them, but when I try to click the field, I get the following error (using Chrome):

coloris.js:794 Uncaught TypeError: Cannot set properties of null (setting 'checked')
    at updateColor (coloris.js:794:74)
    at setColorFromStr (coloris.js:588:3)
    at HTMLInputElement.openPicker (coloris.js:383:3)
    at HTMLDocument.<anonymous> (coloris.js:1263:9)

If I comment out line 794, I get no error but nothing shows up either.

Any idea what I'm doing wrong ?

[mdbassit]

My guess is, not all the DOM elements are available when you initialize Coloris(), try adding a delay like this for example:

setTimeout(() => {
  Coloris({
    el: ".color-picker",
  });
}, 250);

[FMaz008]

Which DOM elements are required?

I'm asking because I'm trying to use this in the popup window of a browser extension (where the extension's settings are).

[FMaz008]

BTW, I tried adding a timeout of 1000ms (plenty of time) and that error still occur. I wonder of Coloris fail to bind some of its elements to my page.

[mdbassit]

Unfortunately, I'm unfamiliar with how browser extensions work. I'm afraid I won't be able to help with this issue.

[FMaz008]

I appreciate you trying :) thank you!

[Agog-io]

Had the same issue , you are probably trying to attach the picker / use an element in another domTree. Look into editing document.querySelectors calls in the library if you are looking for a quick fix (I am also unfamiliar on how extensions work but this is likely the issue here)