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
461 stars 58 forks source link

Firefox accessing colorAreaDims before initialization #117

Closed laura-pblty closed 1 year ago

laura-pblty commented 1 year ago

We found many (not actively reproducible) bugs in our logs with Firefox/102.0, declaring accessing undefined colorAreaDims. Unfortunately, I do not have an expressive trace either, but initializing the colorAreaDims variable with its subproperties fixed it

var defaultInstance = {}; var hasInstance = false; var colorAreaDims = { width: 0, height: 0, x: 0, y: 0 }

Could you provide robust access to it? Regards

mdbassit commented 1 year ago

Thank you for reporting this ! If this is indeed a yet unfixed issue, I'd like to get to the bottom of it. Initializing colorAreaDims with its properties will just mask any underlying problem. Would you be willing to share more information about your logs ?

Does this happen with other browsers or other versions of Firefox ? Are there any more details you can share from your logs ? What properties are being accessed while colorAreaDims is still undefined ?

laura-pblty commented 1 year ago

I will try to summarize:

We currently use the 0.20.0 version in production, it also appeared in 0.19.0 (dist files)

s is undefined M (https://lib.js?v140.0:7:7061) j (https://lib.js?v140.0:7:9349)

a is undefined B (https://lib.js?v139.1:7:7219) z (https://lib.js?v139.1:7:9129)

The error occured on initial page load or something, not while using the picker. I have no info about user input, but am sure that the picker was not visible or used. So I checked the code and s/a being undefined had to be the colorAreaDims while trying to access its width, somehow trying to set a marker

Hope that helps

mdbassit commented 1 year ago

This is quite a bit tricky!

colorAreaDims is defined the moment the document finishes loading. I can't imagine how it can be accessed before it's defined! Are you certain the s/a minified names are indeed colorAreaDims?

Also, it looks like you are using Coloris as part of a bundle, are you certain the error comes from Coloris and not some other tool in the bundle? Is it at all possible to have a copy of the bundle to examine ?

laura-pblty commented 1 year ago

Pretty sure that this fixed it, as we had no updates within this bundle for months. I will try to deliver the latest coloris version to some test users in our next development cycle and provide you the bundled code and logs, if it occures again

mdbassit commented 1 year ago

I will try to deliver the latest coloris version to some test users in our next development cycle and provide you the bundled code and logs, if it occures again

Thank you so much ! With your help, we can make Coloris better for everyone.

rintisch commented 1 year ago

I get the same error, also in Firefox (116.0.1). I am currently only working local and there the error occurs only after starting the dev on the first page load. If I restart the devserver again and reload the page the error does not occur O.o

I post a snippet of my package.json, maybe it helps?

{
  "scripts": {
    "devserver": "npx webpack serve"
  },
  "dependencies": {
    "@melloware/coloris": "^0.20.0",
    "@svgdotjs/svg.js": "^3.1.2"
  },
  "devDependencies": {
    "sass": "^1.64.1",
    "sass-loader": "^13.3.2",
    "css-loader": "^6.8.1",
    "eslint": "^8.45.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

And here is how I use it: I need multiple palettes next to each other, therefore I created the needed HTML elements myself. I guess this is not best practice but to be honest I did not get it from the documentation but just looked at the example page and imitated it.

       #renderColorPalette(data) {
        Coloris.init();

        const paletteContainer = document.getElementById('color-palette');

        // palette is an array of HEX colors 
        const palette = data.colors.palette;

        palette.forEach((color, i) => {

            // Container div
            let container = this.htmlElements.container(['color-container', 'clr-field']);
            container.style.color = color;

            // Create input field
            let input = this.htmlElements.input(
                'text', `color-${i}`, color
            );
            // Following line seems to be needed to make it work, but is not documented so I think I do it not the right way?
            input.setAttribute('data-coloris', ''); 
            input.addEventListener('change', event => { // some event listener});
            container.appendChild(input);

            // Create button
            let button = document.createElement('button');
            container.appendChild(button);

            Coloris.setInstance(`color-${i}`, {
                alpha: false,
                format: 'hsl',
            });

            paletteContainer.appendChild(container);
        });
    }
mdbassit commented 1 year ago

I get the same error, also in Firefox (116.0.1). I am currently only working local and there the error occurs only after starting the dev on the first page load. If I restart the devserver again and reload the page the error does not occur O.o

Can you paste the exact error message you get?

And here is how I use it: I need multiple palettes next to each other, therefore I created the needed HTML elements myself. I guess this is not best practice but to be honest I did not get it from the documentation but just looked at the example page and imitated it.

You don't need to define most of that manually, all you need is to generate your input fields and then initialize Coloris.

// Not sure what JS framework you use, so I'm reusing your code style
#renderColorPalette(data) {
    Coloris.init();

    const paletteContainer = document.getElementById('color-palette');

    // palette is an array of HEX colors 
    const palette = data.colors.palette;

    palette.forEach((color, i) => {

        // Create input field
        const input = this.htmlElements.input(
            'text', `color-${i}`, color
        );

        input.setAttribute('data-coloris', ''); 
        paletteContainer.appendChild(input);
    });

    Coloris({
        alpha: false,
        format: 'hsl',
    });
}
mdbassit commented 1 year ago

@laura-perbility Do you also use Coloris as an NPM module?

rintisch commented 1 year ago

@mdbassit here is the exact error message:

Uncaught TypeError: colorAreaDims is undefined
    setColorAtPosition webpack:///./node_modules/@melloware/coloris/dist/esm/coloris.js?:576
    setHue webpack:///./node_modules/@melloware/coloris/dist/esm/coloris.js?:733

Thanks for caring!

laura-pblty commented 1 year ago

@mdbassit we take the dist build and use webpack to bundle it with other libraries. It is loaded via

<script src="/build/lib.js?v141.3" type="text/javascript" defer=""></script>

like

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["lib"], { (function(module, exports) { // Coloris dist build or other library } }

melloware commented 1 year ago

@mdbassit I wonder if its a bug in our Coloris Wrapper doing something slightly differently as it has to load for loaders.

mdbassit commented 1 year ago

@mdbassit I wonder if its a bug in our Coloris Wrapper doing something slightly differently as it has to load for loaders.

I suspected that at first, but @laura-perbility says they are getting the error with the official build of Coloris rather than the npm version.

Either way, I'll take a look at the code of both to see if I can spot something.

mdbassit commented 1 year ago

I'm still unable to reproduce this error nor find anything that might cause it!

@rintisch, is it at all possible for you to share your code so I can't try and diagnose this a bit more?

rintisch commented 1 year ago

@mdbassit I will come back with a minimal version of my code that I can share as soon as possible, hopefully this weekend.

rintisch commented 1 year ago

@mdbassit I created a nearly minimal setup of my app. You can find it here: https://github.com/rintisch/coloris-issue-117

But as I realized now: The error seems only to occur when I did not yet start the devserver (npm run devserver). So it is in my case not a bug would I say. It seems that the error just occured because I had the habbit to start the browser first and the devserver afterwards.

laura-pblty commented 1 year ago

@mdbassit I had one test user reproducing it with latest coloris version that resulted in the following bundled code. He reported explicitly no error or interaction with the picker itself while the log was generated.

s is undefined M (https://app/lib.js?v142.0-rc01+20230818-115702+test:7:7116) j (https://app/lib.js?v142.0-rc01+20230818-115702+test:7:9404) 2023-08-21 10:13:14.137 6316F799 Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0 [1022,730] [1536,864]

Bundled code (window.webpackJsonp = window.webpackJsonp || []).push([["lib"], { "1/hh": function (e, t) { /*! * Copyright (c) 2021 Momo Bassit. * Licensed under the MIT License (MIT) * https://github.com/mdbassit/Coloris */ !function (e, t, n, i) { var o, r, a, s, l, c, d, u, h, f, m, g, p, E, T, C, I, O = t.createElement("canvas").getContext("2d"), v = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 }, D = { el: "[data-coloris]", parent: "body", theme: "default", themeMode: "light", rtl: !1, wrap: !0, margin: 2, format: "hex", formatToggle: !1, swatches: [], swatchesOnly: !1, alpha: !0, forceAlpha: !1, focusInput: !0, selectInput: !1, inline: !1, defaultColor: "#000000", clearButton: !1, clearLabel: "Clear", closeButton: !1, closeLabel: "Close", onChange: function () { }, a11y: { open: "Open color picker", close: "Close color picker", clear: "Clear the selected color", marker: "Saturation: {s}. Brightness: {v}.", hueSlider: "Hue slider", alphaSlider: "Opacity slider", input: "Color value field", format: "Color format", swatch: "Color swatch", instruction: "Saturation and brightness selector. Use up, down, left and right arrow keys to select." } }, R = {}, b = "", y = {}, K = !1; function _(n) { if ("object" == typeof n) for (var i in n) switch (i) { case "el": x(n.el), !1 !== n.wrap && A(n.el); break; case "parent": (o = t.querySelector(n.parent)) && (o.appendChild(r), D.parent = n.parent, o === t.body && (o = void 0)); break; case "themeMode": D.themeMode = n.themeMode, "auto" === n.themeMode && e.matchMedia && e.matchMedia("(prefers-color-scheme: dark)").matches && (D.themeMode = "dark"); case "theme": n.theme && (D.theme = n.theme), r.className = "clr-picker clr-" + D.theme + " clr-" + D.themeMode, D.inline && N(); break; case "rtl": D.rtl = !!n.rtl, t.querySelectorAll(".clr-field").forEach((function (e) { return e.classList.toggle("clr-rtl", D.rtl) })); break; case "margin": n.margin *= 1, D.margin = isNaN(n.margin) ? D.margin : n.margin; break; case "wrap": n.el && n.wrap && A(n.el); break; case "formatToggle": D.formatToggle = !!n.formatToggle, G("clr-format").style.display = D.formatToggle ? "block" : "none", D.formatToggle && (D.format = "auto"); break; case "swatches": Array.isArray(n.swatches) && function () { var e = []; n.swatches.forEach((function (t, n) { e.push('") })), G("clr-swatches").innerHTML = e.length ? "
" + e.join("") + "
" : "", D.swatches = n.swatches.slice() }(); break; case "swatchesOnly": D.swatchesOnly = !!n.swatchesOnly, r.setAttribute("data-minimal", D.swatchesOnly); break; case "alpha": D.alpha = !!n.alpha, r.setAttribute("data-alpha", D.alpha); break; case "inline": if (D.inline = !!n.inline, r.setAttribute("data-inline", D.inline), D.inline) { var s = n.defaultColor || D.defaultColor; T = P(s), N(), F(s) } break; case "clearButton": "object" == typeof n.clearButton && (n.clearButton.label && (D.clearLabel = n.clearButton.label, u.innerHTML = D.clearLabel), n.clearButton = n.clearButton.show), D.clearButton = !!n.clearButton, u.style.display = D.clearButton ? "block" : "none"; break; case "clearLabel": D.clearLabel = n.clearLabel, u.innerHTML = D.clearLabel; break; case "closeButton": D.closeButton = !!n.closeButton, D.closeButton ? r.insertBefore(h, c) : c.appendChild(h); break; case "closeLabel": D.closeLabel = n.closeLabel, h.innerHTML = D.closeLabel; break; case "a11y": var l = n.a11y, m = !1; if ("object" == typeof l) for (var p in l) l[p] && D.a11y[p] && (D.a11y[p] = l[p], m = !0); if (m) { var E = G("clr-open-label"), C = G("clr-swatch-label"); E.innerHTML = D.a11y.open, C.innerHTML = D.a11y.swatch, h.setAttribute("aria-label", D.a11y.close), u.setAttribute("aria-label", D.a11y.clear), f.setAttribute("aria-label", D.a11y.hueSlider), g.setAttribute("aria-label", D.a11y.alphaSlider), d.setAttribute("aria-label", D.a11y.input), a.setAttribute("aria-label", D.a11y.instruction) } break; default: D[i] = n[i] } } function k(e, t) { "string" == typeof e && "object" == typeof t && (R[e] = t, K = !0) } function w(e) { delete R[e], 0 === Object.keys(R).length && (K = !1, e === b && S()) } function S() { Object.keys(y).length > 0 && (_(y), b = "", y = {}) } function x(e) { X(t, "click", e, (function (e) { D.inline || (!function (e) { if (K) { var t = ["el", "wrap", "rtl", "inline", "defaultColor", "a11y"], n = function (n) { var i = R[n]; if (e.matches(n)) { for (var o in b = n, y = {}, t.forEach((function (e) { return delete i[e] })), i) y[o] = Array.isArray(D[o]) ? D[o].slice() : D[o]; return _(i), "break" } }; for (var i in R) { if ("break" === n(i)) break } } }(e.target), E = e.target, C = E.value, T = P(C), r.classList.add("clr-open"), N(), F(C), (D.focusInput || D.selectInput) && (d.focus({ preventScroll: !0 }), d.setSelectionRange(E.selectionStart, E.selectionEnd)), D.selectInput && d.select(), (I || D.swatchesOnly) && W().shift().focus(), E.dispatchEvent(new Event("open", { bubbles: !0 }))) })), X(t, "input", e, (function (e) { var t = e.target.parentNode; t.classList.contains("clr-field") && (t.style.color = e.target.value) })) } function N() { var n, i, l, c = o, d = e.scrollY, u = r.offsetWidth, h = r.offsetHeight, f = { left: !1, top: !1 }, m = { x: 0, y: 0 }; if (c && (n = e.getComputedStyle(c), i = parseFloat(n.marginTop), l = parseFloat(n.borderTopWidth), (m = c.getBoundingClientRect()).y += l + d), !D.inline) { var g = E.getBoundingClientRect(), p = g.x, T = d + g.y + g.height + D.margin; c ? (p -= m.x, T -= m.y, p + u > c.clientWidth && (p += g.width - u, f.left = !0), T + h > c.clientHeight - i && h + D.margin <= g.top - (m.y - d) && (T -= g.height + h + 2 * D.margin, f.top = !0), T += c.scrollTop) : (p + u > t.documentElement.clientWidth && (p += g.width - u, f.left = !0), T + h - d > t.documentElement.clientHeight && h + D.margin <= g.top && (T = d + g.y - h - D.margin, f.top = !0)), r.classList.toggle("clr-left", f.left), r.classList.toggle("clr-top", f.top), r.style.left = p + "px", r.style.top = T + "px", m.x += r.offsetLeft, m.y += r.offsetTop } s = { width: a.offsetWidth, height: a.offsetHeight, x: a.offsetLeft + m.x, y: a.offsetTop + m.y } } function A(e) { t.querySelectorAll(e).forEach((function (e) { var n = e.parentNode; if (!n.classList.contains("clr-field")) { var i = t.createElement("div"), o = "clr-field"; (D.rtl || e.classList.contains("clr-rtl")) && (o += " clr-rtl"), i.innerHTML = '', n.insertBefore(i, e), i.setAttribute("class", o), i.style.color = e.value, i.appendChild(e) } })) } function L(e) { if (E && !D.inline) { var t = E; e && (E = void 0, C !== t.value && (t.value = C, t.dispatchEvent(new Event("input", { bubbles: !0 })))), setTimeout((function () { C !== t.value && t.dispatchEvent(new Event("change", { bubbles: !0 })) })), r.classList.remove("clr-open"), K && S(), t.dispatchEvent(new Event("close", { bubbles: !0 })), D.focusInput && t.focus({ preventScroll: !0 }), E = void 0 } } function F(e) { var t = function (e) { var t, n; O.fillStyle = "#000", O.fillStyle = e, (t = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(O.fillStyle)) ? (n = { r: 1 * t[3], g: 1 * t[4], b: 1 * t[5], a: 1 * t[6] }).a = +n.a.toFixed(2) : (t = O.fillStyle.replace("#", "").match(/.{2}/g).map((function (e) { return parseInt(e, 16) })), n = { r: t[0], g: t[1], b: t[2], a: 1 }); return n }(e), i = function (e) { var t = e.r / 255, i = e.g / 255, o = e.b / 255, r = n.max(t, i, o), a = n.min(t, i, o), s = r - a, l = r, c = 0, d = 0; s && (r === t && (c = (i - o) / s), r === i && (c = 2 + (o - t) / s), r === o && (c = 4 + (t - i) / s), r && (d = s / r)); return { h: (c = n.floor(60 * c)) < 0 ? c + 360 : c, s: n.round(100 * d), v: n.round(100 * l), a: e.a } }(t); $(i.s, i.v), V(t, i), f.value = i.h, r.style.color = "hsl(" + i.h + ", 100%, 50%)", m.style.left = i.h / 360 * 100 + "%", l.style.left = s.width * i.s / 100 + "px", l.style.top = s.height - s.height * i.v / 100 + "px", g.value = 100 * i.a, p.style.left = 100 * i.a + "%" } function P(e) { var t = e.substring(0, 3).toLowerCase(); return "rgb" === t || "hsl" === t ? t : "hex" } function B(n) { n = void 0 !== n ? n : d.value, E && (E.value = n, E.dispatchEvent(new Event("input", { bubbles: !0 }))), D.onChange && D.onChange.call(e, n, E), t.dispatchEvent(new CustomEvent("coloris:pick", { detail: { color: n, currentEl: E } })) } function M(e, t) { var i = { h: 1 * f.value, s: e / s.width * 100, v: 100 - t / s.height * 100, a: g.value / 100 }, o = function (e) { var t = e.s / 100, i = e.v / 100, o = t * i, r = e.h / 60, a = o * (1 - n.abs(r % 2 - 1)), s = i - o; o += s, a += s; var l = n.floor(r) % 6, c = [o, a, s, s, a, o][l], d = [a, o, o, a, s, s][l], u = [s, s, a, o, o, a][l]; return { r: n.round(255 * c), g: n.round(255 * d), b: n.round(255 * u), a: e.a } }(i); $(i.s, i.v), V(o, i), B() } function $(e, t) { var n = D.a11y.marker; e = 1 * e.toFixed(1), t = 1 * t.toFixed(1), n = (n = n.replace("{s}", e)).replace("{v}", t), l.setAttribute("aria-label", n) } function H(e) { var t = function (e) { return { pageX: e.changedTouches ? e.changedTouches[0].pageX : e.pageX, pageY: e.changedTouches ? e.changedTouches[0].pageY : e.pageY } }(e), n = t.pageX - s.x, i = t.pageY - s.y; o && (i += o.scrollTop), z(n, i), e.preventDefault(), e.stopPropagation() } function q(e, t) { z(1 * l.style.left.replace("px", "") + e, 1 * l.style.top.replace("px", "") + t) } function z(e, t) { e = e < 0 ? 0 : e > s.width ? s.width : e, t = t < 0 ? 0 : t > s.height ? s.height : t, l.style.left = e + "px", l.style.top = t + "px", M(e, t), l.focus() } function V(e, i) { void 0 === e && (e = {}), void 0 === i && (i = {}); var o = D.format; for (var r in e) v[r] = e[r]; for (var s in i) v[s] = i[s]; var u, h = function (e) { var t = e.r.toString(16), n = e.g.toString(16), i = e.b.toString(16), o = ""; e.r < 16 && (t = "0" + t); e.g < 16 && (n = "0" + n); e.b < 16 && (i = "0" + i); if (D.alpha && (e.a < 1 || D.forceAlpha)) { var r = 255 * e.a | 0; o = r.toString(16), r < 16 && (o = "0" + o) } return "#" + t + n + i + o }(v), f = h.substring(0, 7); switch (l.style.color = f, p.parentNode.style.color = f, p.style.color = h, c.style.color = h, a.style.display = "none", a.offsetHeight, a.style.display = "", p.nextElementSibling.style.display = "none", p.nextElementSibling.offsetHeight, p.nextElementSibling.style.display = "", "mixed" === o ? o = 1 === v.a ? "hex" : "rgb" : "auto" === o && (o = T), o) { case "hex": d.value = h; break; case "rgb": d.value = function (e) { return !D.alpha || 1 === e.a && !D.forceAlpha ? "rgb(" + e.r + ", " + e.g + ", " + e.b + ")" : "rgba(" + e.r + ", " + e.g + ", " + e.b + ", " + e.a + ")" }(v); break; case "hsl": d.value = (u = function (e) { var t, i = e.v / 100, o = i * (1 - e.s / 100 / 2); return o > 0 && o < 1 && (t = n.round((i - o) / n.min(o, 1 - o) * 100)), { h: e.h, s: t || 0, l: n.round(100 * o), a: e.a } }(v), !D.alpha || 1 === u.a && !D.forceAlpha ? "hsl(" + u.h + ", " + u.s + "%, " + u.l + "%)" : "hsla(" + u.h + ", " + u.s + "%, " + u.l + "%, " + u.a + ")") }t.querySelector('.clr-format [value="' + o + '"]').checked = !0 } function j() { var e = 1 * f.value, t = 1 * l.style.left.replace("px", ""), n = 1 * l.style.top.replace("px", ""); r.style.color = "hsl(" + e + ", 100%, 50%)", m.style.left = e / 360 * 100 + "%", M(t, n) } function U() { var e = g.value / 100; p.style.left = 100 * e + "%", V({ a: e }), B() } function W() { return Array.from(r.querySelectorAll("input, button")).filter((function (e) { return !!e.offsetWidth })) } function G(e) { return t.getElementById(e) } function X(e, t, n, i) { var o = Element.prototype.matches || Element.prototype.msMatchesSelector; "string" == typeof n ? e.addEventListener(t, (function (e) { o.call(e.target, n) && i.call(e.target, e) })) : (i = n, e.addEventListener(t, i)) } function Y(e, n) { n = void 0 !== n ? n : [], "loading" !== t.readyState ? e.apply(void 0, n) : t.addEventListener("DOMContentLoaded", (function () { e.apply(void 0, n) })) } void 0 !== NodeList && NodeList.prototype && !NodeList.prototype.forEach && (NodeList.prototype.forEach = Array.prototype.forEach), e.Coloris = function () { var e = { set: _, wrap: A, close: L, setInstance: k, removeInstance: w, updatePosition: N }; function t(e) { Y((function () { e && ("string" == typeof e ? x(e) : _(e)) })) } var n = function (n) { t[n] = function () { for (var t = arguments.length, i = new Array(t), o = 0; o < t; o++)i[o] = arguments[o]; Y(e[n], i) } }; for (var i in e) n(i); return t }(), Y((function () { o = void 0, (r = t.createElement("div")).setAttribute("id", "clr-picker"), r.className = "clr-picker", r.innerHTML = '
' + D.a11y.format + '
", t.body.appendChild(r), a = G("clr-color-area"), l = G("clr-color-marker"), u = G("clr-clear"), h = G("clr-close"), c = G("clr-color-preview"), d = G("clr-color-value"), f = G("clr-hue-slider"), m = G("clr-hue-marker"), g = G("clr-alpha-slider"), p = G("clr-alpha-marker"), x(D.el), A(D.el), X(r, "mousedown", (function (e) { r.classList.remove("clr-keyboard-nav"), e.stopPropagation() })), X(a, "mousedown", (function (e) { X(t, "mousemove", H) })), X(a, "touchstart", (function (e) { t.addEventListener("touchmove", H, { passive: !1 }) })), X(l, "mousedown", (function (e) { X(t, "mousemove", H) })), X(l, "touchstart", (function (e) { t.addEventListener("touchmove", H, { passive: !1 }) })), X(d, "change", (function (e) { var t = d.value; (E || D.inline) && B("" === t ? t : F(t)) })), X(u, "click", (function (e) { B(""), L() })), X(h, "click", (function (e) { B(), L() })), X(G("clr-format"), "click", ".clr-format input", (function (e) { T = e.target.value, V(), B() })), X(r, "click", ".clr-swatches button", (function (e) { F(e.target.textContent), B(), D.swatchesOnly && L() })), X(t, "mouseup", (function (e) { t.removeEventListener("mousemove", H) })), X(t, "touchend", (function (e) { t.removeEventListener("touchmove", H) })), X(t, "mousedown", (function (e) { I = !1, r.classList.remove("clr-keyboard-nav"), L() })), X(t, "keydown", (function (e) { var t = e.key, n = e.target, i = e.shiftKey; if ("Escape" === t ? L(!0) : ["Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t) && (I = !0, r.classList.add("clr-keyboard-nav")), "Tab" === t && n.matches(".clr-picker *")) { var o = W(), a = o.shift(), s = o.pop(); i && n === a ? (s.focus(), e.preventDefault()) : i || n !== s || (a.focus(), e.preventDefault()) } })), X(t, "click", ".clr-field button", (function (e) { K && S(), e.target.nextElementSibling.dispatchEvent(new Event("click", { bubbles: !0 })) })), X(l, "keydown", (function (e) { var t = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }; Object.keys(t).includes(e.key) && (q.apply(void 0, t[e.key]), e.preventDefault()) })), X(a, "click", H), X(f, "input", j), X(g, "input", U) })) }(window, document, Math) }, "4bI7": function (e, t, n) { "use strict"; } }])
mdbassit commented 1 year ago

It seems that the error just occured because I had the habbit to start the browser first and the devserver afterwards.

I was finally able to reproduce the error thanks to this clue. It appears that when firefox starts, it triggers input and change events on all the fields on the page (not quite sure why!), which causes a race condition in Coloris.

I'm going to release a fix in a few moments. thank you @laura-perbility and @rintisch for you help to identify this issue.

melloware commented 1 year ago

Team work!!!