[form-builder] Fix InputInput wrapper issue

sanity-io · Oct 6, 2020 · e005c65 · e005c65
1 parent 250aa32
commit e005c65
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 32 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.css
@@ -1,5 +1,9 @@
 @import 'part:@sanity/base/theme/variables-style';
 
+.imageInput {
+  /* for debugging */
+}
+
 .content {
   position: relative;
   padding-bottom: calc(2 / 3 * 100%);
@@ -68,7 +72,7 @@
 .functions {
   composes: functions from 'part:@sanity/components/fieldsets/default-style';
 
-  @nest .content + & {
+  @nest .contentContainer + & {
     margin-top: var(--small-padding);
 
     @media (--screen-medium) {

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx
@@ -595,7 +595,7 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
         useChangeIndicator={false}
         {...uploadProps}
       >
-        <div>
+        <div className={styles.imageInput}>
           {uploadError && (
             <Snackbar
               kind="error"
@@ -606,36 +606,42 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
               subtitle={<div>We're really sorry, but the upload could not be completed.</div>}
             />
           )}
-          <div className={styles.content}>
-            <ChangeIndicatorCompareValueProvider
-              value={value?.asset?._ref}
-              compareValue={compareValue?.asset?._ref}
-            >
-              <ChangeIndicator
-                className={classNames(
-                  styles.assetWrapper,
-                  readOnly && styles.readOnly,
-                  hasFocus && styles.focused
-                )}
-              >
-                {value && value._upload && (
-                  <div className={styles.uploadState}>{this.renderUploadState(value._upload)}</div>
-                )}
-                {/* eslint-disable-next-line no-nested-ternary */}
-                {hasAsset ? (
-                  <WithMaterializedReference reference={value.asset} materialize={materialize}>
-                    {this.renderMaterializedAsset}
-                  </WithMaterializedReference>
-                ) : readOnly ? (
-                  <span>Field is read only</span>
-                ) : (
-                  SUPPORT_DIRECT_UPLOADS && (
-                    <UploadPlaceholder hasFocus={hasFocus} fileType="image" />
-                  )
-                )}
-              </ChangeIndicator>
-            </ChangeIndicatorCompareValueProvider>
-          </div>
+
+          <ChangeIndicatorCompareValueProvider
+            value={value?.asset?._ref}
+            compareValue={compareValue?.asset?._ref}
+          >
+            <ChangeIndicator className={styles.contentContainer}>
+              <div className={styles.content}>
+                <div
+                  className={classNames(
+                    styles.assetWrapper,
+                    readOnly && styles.readOnly,
+                    hasFocus && styles.focused
+                  )}
+                >
+                  {value && value._upload && (
+                    <div className={styles.uploadState}>
+                      {this.renderUploadState(value._upload)}
+                    </div>
+                  )}
+                  {/* eslint-disable-next-line no-nested-ternary */}
+                  {hasAsset ? (
+                    <WithMaterializedReference reference={value.asset} materialize={materialize}>
+                      {this.renderMaterializedAsset}
+                    </WithMaterializedReference>
+                  ) : readOnly ? (
+                    <span>Field is read only</span>
+                  ) : (
+                    SUPPORT_DIRECT_UPLOADS && (
+                      <UploadPlaceholder hasFocus={hasFocus} fileType="image" />
+                    )
+                  )}
+                </div>
+              </div>
+            </ChangeIndicator>
+          </ChangeIndicatorCompareValueProvider>
+
           <div className={styles.functions}>
             <ButtonGrid>
               {!readOnly && SUPPORT_DIRECT_UPLOADS && (
@@ -672,6 +678,7 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
             </ButtonGrid>
           </div>
         </div>
+
         {highlightedFields.length > 0 && this.renderFields(highlightedFields)}
         {isAdvancedEditOpen && this.renderAdvancedEdit(otherFields)}
         {selectedAssetSource && this.renderAssetSource()}