Color picker fixes (#368)

playcanvas · Nov 7, 2024 · c802994 · c802994
1 parent 15247a8
commit c802994
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts
@@ -111,7 +111,7 @@ class ColorPicker extends Element implements IBindable {
         this.dom.addEventListener('blur', this._onBlur);
 
         this.dom.addEventListener('pointerdown', (evt) => {
-            if (this.enabled && !this.readOnly) {
+            if (this.enabled && !this.readOnly && this._overlay.hidden) {
                 this._openColorPicker();
 
                 evt.stopPropagation();

diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts
@@ -42,7 +42,13 @@ class Overlay extends Container {
         this._domClickableOverlay.classList.add(CLASS_OVERLAY_INNER);
         this.dom.appendChild(this._domClickableOverlay);
 
-        this._domClickableOverlay.addEventListener('pointerdown', this._onPointerDown);
+        this.on('show', () => {
+            document.body.addEventListener('pointerdown', this._onPointerDown, true);
+        });
+
+        this.on('hide', () => {
+            document.body.removeEventListener('pointerdown', this._onPointerDown, true);
+        });
 
         this.domContent = document.createElement('div');
         this.domContent.ui = this;
@@ -56,13 +62,13 @@ class Overlay extends Container {
     destroy() {
         if (this._destroyed) return;
 
-        this._domClickableOverlay.removeEventListener('pointerdown', this._onPointerDown);
-
         super.destroy();
     }
 
-    protected _onPointerDown = (evt: MouseEvent) => {
-        if (!this.clickable) return;
+    protected _onPointerDown = (evt: PointerEvent) => {
+        if (!this.clickable || this.domContent.contains(evt.target as Node)) {
+            return;
+        }
 
         // some field might be in focus
         document.body.blur();