From e6163085b5b25980d2cb5c5d7fc955975ab20745 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Tue, 5 Nov 2019 17:46:44 +0200
Subject: [PATCH] Simplified ColorInput

---
 src/common/ColorInput/ColorInput.js | 25 ++++++-------------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index 661dae50c..f9a682eb9 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -14,19 +14,6 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
     const dataset = useDataset(props);
     const [modalOpen, setModalOpen, setModalClosed] = useBinaryState(false);
     const [tempValue, setTempValue] = React.useState(value);
-    const closeModal = (event) => {
-        event.nativeEvent.openModalPrevented = true;
-        setModalClosed();
-    };
-    const pickerLabelOnClick = React.useCallback((event) => {
-        if (typeof props.onClick === 'function') {
-            props.onClick(event);
-        }
-
-        if (!event.nativeEvent.openModalPrevented) {
-            setModalOpen();
-        }
-    }, [props.onClick]);
     const colorPickerOnInput = React.useCallback((event) => {
         setTempValue(event.value);
     }, []);
@@ -40,23 +27,23 @@ const ColorInput = ({ className, value, onChange, ...props }) => {
                 nativeEvent: event.nativeEvent
             });
         }
-
-        closeModal(event);
-    }, [onChange, tempValue, dataset, closeModal]);
+        setModalClosed();
+    }, [onChange, tempValue, dataset]);
     React.useEffect(() => {
         setTempValue(value);
     }, [value, modalOpen]);
     return (
-        <Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={pickerLabelOnClick}>
+        <React.Fragment>
+            <Button title={value} {...props} style={{ ...props.style, backgroundColor: value }} className={className} onClick={setModalOpen} />
             {
                 modalOpen ?
-                    <ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick } }]} onCloseRequest={closeModal}>
+                    <ModalDialog title={'Choose a color:'} buttons={[{ label: 'Select', props: { onClick: submitButtonOnClick, 'data-autofocus': true } }]} onCloseRequest={setModalClosed}>
                         <ColorPicker value={tempValue} onInput={colorPickerOnInput} />
                     </ModalDialog>
                     :
                     null
             }
-        </Button>
+        </React.Fragment>
     );
 };