ColorPicker fixes (#365)

playcanvas · Oct 29, 2024 · 432fd26 · 432fd26
1 parent 51c00a5
commit 432fd26
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts
@@ -110,9 +110,12 @@ class ColorPicker extends Element implements IBindable {
         this.dom.addEventListener('focus', this._onFocus);
         this.dom.addEventListener('blur', this._onBlur);
 
-        this.on('click', () => {
+        this.dom.addEventListener('pointerdown', (evt) => {
             if (this.enabled && !this.readOnly) {
                 this._openColorPicker();
+
+                evt.stopPropagation();
+                evt.preventDefault();
             }
         });
 
@@ -375,7 +378,7 @@ class ColorPicker extends Element implements IBindable {
         // position picker
         const rectPicker = this._overlay.dom.getBoundingClientRect();
         const rectElement = this.dom.getBoundingClientRect();
-        this._setColorPickerPosition(rectElement.left - rectElement.width, rectElement.top + 25);
+        this._setColorPickerPosition(rectElement.left - rectPicker.left, rectElement.bottom - rectPicker.top + 1);
 
         // color changed, update picker
         this._evtColorToPicker = this.on('change', () => {

diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts
@@ -42,7 +42,7 @@ class Overlay extends Container {
         this._domClickableOverlay.classList.add(CLASS_OVERLAY_INNER);
         this.dom.appendChild(this._domClickableOverlay);
 
-        this._domClickableOverlay.addEventListener('mousedown', this._onMouseDown);
+        this._domClickableOverlay.addEventListener('pointerdown', this._onPointerDown);
 
         this.domContent = document.createElement('div');
         this.domContent.ui = this;
@@ -56,12 +56,12 @@ class Overlay extends Container {
     destroy() {
         if (this._destroyed) return;
 
-        this._domClickableOverlay.removeEventListener('mousedown', this._onMouseDown);
+        this._domClickableOverlay.removeEventListener('pointerdown', this._onPointerDown);
 
         super.destroy();
     }
 
-    protected _onMouseDown = (evt: MouseEvent) => {
+    protected _onPointerDown = (evt: MouseEvent) => {
         if (!this.clickable) return;
 
         // some field might be in focus
@@ -73,6 +73,7 @@ class Overlay extends Container {
         });
 
         evt.preventDefault();
+        evt.stopPropagation();
     };
 
     /**