fixed color picker so that dismissing it doesn't lose focus on active text box - allows font color to be changed

1 files changed, 9 insertions, 7 deletions

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>}