From 9f89d4d2bd166a189da0c6cce66ac4ebb5682ab5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 5 Jul 2022 11:22:02 -0400
Subject: fixed color picker so that dismissing it doesn't lose focus on active
 text box - allows font color to be changed

---
 src/client/views/nodes/button/FontIconBox.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 85efc67a5..798759c01 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -344,12 +344,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             <div className="fontIconBox-label" style={{ color, backgroundColor }}>
                 {this.label}
             </div>;
-
-        const dropdownCaret = <div
-            className="menuButton-dropDown"
-            style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
-            <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
-        </div>;
+            
+        // dropdown caret seems superfluous since clicking the color button does the same thing    
+        // const dropdownCaret = <div
+        //     className="menuButton-dropDown"
+        //     style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
+        //     <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
+        // </div>;
         setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
         return (
             <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")} ${this.colorPickerClosed}`}
@@ -367,7 +368,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                             onClick={e => e.stopPropagation()}>
                             {this.colorPicker(curColor)}
                         </div>
-                        <div className="dropbox-background" onClick={action((e) => {
+                        <div className="dropbox-background" onPointerDown={action((e) => {
+                            e.preventDefault();
                             e.stopPropagation(); this.colorPickerClosed = true;
                         })} />
                     </div>}
-- 
cgit v1.2.3-70-g09d2