hide validation on click outside for thumnbail image

src/redux/studio-mutations.js

@@ -173,13 +173,14 @@ const mutateFollowingStudio = shouldFollow => ((dispatch, getState) => {
 });
 
 const mutateStudioImage = input => ((dispatch, getState) => {
-    if (!input.files || !input.files[0]) return;
+    if (!input.files || !input.files[0]) return Promise.reject(new Error('no file'));
     const state = getState();
     const studioId = selectStudioId(state);
     const currentImage = selectStudioImage(state);
     dispatch(startMutation('image'));
     if (input.files[0].size && input.files[0].size > MAX_IMAGE_BYTES) {
-        return dispatch(completeMutation('image', currentImage, Errors.THUMBNAIL_TOO_LARGE));
+        dispatch(completeMutation('image', currentImage, Errors.THUMBNAIL_TOO_LARGE));
+        return Promise.reject(new Error('thumbnail too large'));
     }
     const formData = new FormData();
     formData.append('file', input.files[0]);

src/views/studio/studio-image.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
+import onClickOutside from 'react-onclickoutside';
 
 import {selectStudioImage, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -14,7 +15,6 @@ import {
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
-
 import editIcon from './icons/edit-icon.svg';
 
 const errorToMessageId = error => {
@@ -43,6 +43,11 @@ const StudioImage = ({
     });
 
     const [showMuteMessage, setShowMuteMessage] = useState(false);
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    StudioImage.handleClickOutside = () => {
+        setHideValidationMessage(true);
+    };
     return (
         <div
             className={fieldClassName}
@@ -78,9 +83,10 @@ const StudioImage = ({
                             handleUpdate(e.target)
                                 .then(dataUrl => setUploadPreview(dataUrl));
                             e.target.value = '';
+                            setHideValidationMessage(false);
                         }}
                     />
-                    {imageError && <ValidationMessage
+                    {imageError && !hideValidationMessage && <ValidationMessage
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(imageError)} />}
                     />}
@@ -91,6 +97,10 @@ const StudioImage = ({
     );
 };
 
+const clickOutsideConfig = {
+    handleClickOutside: () => StudioImage.handleClickOutside
+};
+
 StudioImage.propTypes = {
     imageError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -101,7 +111,7 @@ StudioImage.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-export default connect(
+const connectedStudioImage = connect(
     state => ({
         image: selectStudioImage(state),
         canEditInfo: selectCanEditInfo(state),
@@ -114,3 +124,5 @@ export default connect(
         handleUpdate: mutateStudioImage
     }
 )(StudioImage);
+
+export default onClickOutside(connectedStudioImage, clickOutsideConfig);