From ed4766188dfd963473d19fb12e206e7a46d31fa7 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Mon, 20 May 2024 16:37:53 -0400
Subject: [PATCH] fix(ui): tooltip positioning issues (#6439)

---
 packages/richtext-lexical/src/field/Field.tsx |  12 +-
 .../features/blocks/component/index.scss      |   4 -
 .../richtext-lexical/src/field/index.scss     |   2 -
 .../richtext-slate/src/field/RichText.tsx     |  12 +-
 packages/ui/src/elements/Tooltip/index.scss   |   8 +-
 packages/ui/src/elements/Tooltip/index.tsx    |  45 ++--
 packages/ui/src/fields/Array/index.scss       |   4 -
 packages/ui/src/fields/Array/index.tsx        |   6 +-
 packages/ui/src/fields/Blocks/index.scss      |   4 -
 packages/ui/src/fields/Blocks/index.tsx       |   6 +-
 packages/ui/src/fields/Checkbox/index.scss    |   4 -
 packages/ui/src/fields/Checkbox/index.tsx     |   4 +-
 packages/ui/src/fields/Code/index.tsx         |   4 +-
 .../ui/src/fields/ConfirmPassword/index.tsx   |  22 +-
 packages/ui/src/fields/DateTime/index.scss    |   6 -
 packages/ui/src/fields/DateTime/index.tsx     |   6 +-
 packages/ui/src/fields/Email/index.tsx        |   4 +-
 packages/ui/src/fields/JSON/index.tsx         |   5 +-
 packages/ui/src/fields/Number/index.tsx       | 108 +++++-----
 packages/ui/src/fields/Password/index.tsx     |  23 ++-
 packages/ui/src/fields/RadioGroup/index.scss  |   4 -
 packages/ui/src/fields/RadioGroup/index.tsx   |  81 ++++----
 packages/ui/src/fields/Relationship/index.tsx | 193 +++++++++---------
 packages/ui/src/fields/Select/index.tsx       |   5 +-
 packages/ui/src/fields/Text/Input.tsx         |  95 ++++-----
 packages/ui/src/fields/Textarea/Input.tsx     |  50 ++---
 packages/ui/src/fields/Upload/Input.tsx       |  89 ++++----
 packages/ui/src/forms/FieldError/index.scss   |   3 +-
 packages/ui/src/forms/FieldError/index.tsx    |   4 +-
 packages/ui/src/forms/RenderFields/index.scss |   5 +
 packages/ui/src/hooks/useIntersect.ts         |   2 +-
 31 files changed, 409 insertions(+), 411 deletions(-)

diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx
index 284ed3466e..73bf0e3167 100644
--- a/packages/richtext-lexical/src/field/Field.tsx
+++ b/packages/richtext-lexical/src/field/Field.tsx
@@ -84,14 +84,14 @@ const _RichText: React.FC<
         width,
       }}
     >
+      <FieldLabel
+        CustomLabel={CustomLabel}
+        label={label}
+        required={required}
+        {...(labelProps || {})}
+      />
       <div className={`${baseClass}__wrap`}>
         <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        <FieldLabel
-          CustomLabel={CustomLabel}
-          label={label}
-          required={required}
-          {...(labelProps || {})}
-        />
         <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
           <LexicalProvider
             editorConfig={editorConfig}
diff --git a/packages/richtext-lexical/src/field/features/blocks/component/index.scss b/packages/richtext-lexical/src/field/features/blocks/component/index.scss
index 6f3c4d4196..1e2979b2ea 100644
--- a/packages/richtext-lexical/src/field/features/blocks/component/index.scss
+++ b/packages/richtext-lexical/src/field/features/blocks/component/index.scss
@@ -106,10 +106,6 @@
     line-height: unset;
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__rows {
     display: flex;
     flex-direction: column;
diff --git a/packages/richtext-lexical/src/field/index.scss b/packages/richtext-lexical/src/field/index.scss
index 10c8697c39..bac8e11cad 100644
--- a/packages/richtext-lexical/src/field/index.scss
+++ b/packages/richtext-lexical/src/field/index.scss
@@ -1,8 +1,6 @@
 @import '../scss/styles.scss';
 
 .rich-text-lexical {
-  display: flex;
-
   .errorBoundary {
     pre {
       text-wrap: unset;
diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx
index 428726ad95..1bc380a628 100644
--- a/packages/richtext-slate/src/field/RichText.tsx
+++ b/packages/richtext-slate/src/field/RichText.tsx
@@ -315,14 +315,14 @@ const RichTextField: React.FC<
         width,
       }}
     >
+      <FieldLabel
+        CustomLabel={CustomLabel}
+        label={label}
+        required={required}
+        {...(labelProps || {})}
+      />
       <div className={`${baseClass}__wrap`}>
         <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        <FieldLabel
-          CustomLabel={CustomLabel}
-          label={label}
-          required={required}
-          {...(labelProps || {})}
-        />
         <Slate
           editor={editor}
           key={JSON.stringify({ initialValue, path })} // makes sure slate is completely re-rendered when initialValue changes, bypassing the slate-internal value memoization. That way, external changes to the form will update the editor
diff --git a/packages/ui/src/elements/Tooltip/index.scss b/packages/ui/src/elements/Tooltip/index.scss
index 1768f49eb5..c6802cddc4 100644
--- a/packages/ui/src/elements/Tooltip/index.scss
+++ b/packages/ui/src/elements/Tooltip/index.scss
@@ -6,7 +6,7 @@
   opacity: 0;
   background-color: var(--theme-elevation-800);
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   left: 50%;
   padding: base(0.2) base(0.4);
   color: var(--theme-elevation-0);
@@ -52,8 +52,9 @@
     }
   }
 
+
   &--position-top {
-    bottom: 100%;
+    top: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
     &::after {
@@ -62,8 +63,9 @@
     }
   }
 
+
   &--position-bottom {
-    top: 100%;
+    bottom: calc(var(--base) * -0.6 - 13px);
     transform: translate3d(-50%, var(--caret-size), 0);
 
     &::after {
diff --git a/packages/ui/src/elements/Tooltip/index.tsx b/packages/ui/src/elements/Tooltip/index.tsx
index 3023cf498b..862bb323bb 100644
--- a/packages/ui/src/elements/Tooltip/index.tsx
+++ b/packages/ui/src/elements/Tooltip/index.tsx
@@ -11,6 +11,10 @@ export type Props = {
   className?: string
   delay?: number
   show?: boolean
+  /**
+   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false
+   */
+  staticPositioning?: boolean
 }
 
 export const Tooltip: React.FC<Props> = (props) => {
@@ -21,6 +25,7 @@ export const Tooltip: React.FC<Props> = (props) => {
     className,
     delay = 350,
     show: showFromProps = true,
+    staticPositioning = false,
   } = props
 
   const [show, setShow] = React.useState(showFromProps)
@@ -28,11 +33,14 @@ export const Tooltip: React.FC<Props> = (props) => {
 
   const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')
 
-  const [ref, intersectionEntry] = useIntersect({
-    root: boundingRef?.current || null,
-    rootMargin: '-145px 0px 0px 100px',
-    threshold: 0,
-  })
+  const [ref, intersectionEntry] = useIntersect(
+    {
+      root: boundingRef?.current || null,
+      rootMargin: '-145px 0px 0px 100px',
+      threshold: 0,
+    },
+    staticPositioning,
+  )
 
   useEffect(() => {
     let timerId: NodeJS.Timeout
@@ -52,22 +60,25 @@ export const Tooltip: React.FC<Props> = (props) => {
   }, [showFromProps, delay])
 
   useEffect(() => {
+    if (staticPositioning) return
     setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')
-  }, [intersectionEntry])
+  }, [intersectionEntry, staticPositioning])
 
+  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.
   return (
     <React.Fragment>
-      <aside
-        aria-hidden="true"
-        className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']
-          .filter(Boolean)
-          .join(' ')}
-        ref={ref}
-        title={getTitleAttribute(children)}
-      >
-        <div className="tooltip-content">{children}</div>
-      </aside>
-
+      {!staticPositioning && (
+        <aside
+          aria-hidden="true"
+          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']
+            .filter(Boolean)
+            .join(' ')}
+          ref={ref}
+          style={{ opacity: '0' }}
+        >
+          <div className="tooltip-content">{children}</div>
+        </aside>
+      )}
       <aside
         className={[
           'tooltip',
diff --git a/packages/ui/src/fields/Array/index.scss b/packages/ui/src/fields/Array/index.scss
index ef7ea93e54..c1cef9e3af 100644
--- a/packages/ui/src/fields/Array/index.scss
+++ b/packages/ui/src/fields/Array/index.scss
@@ -54,10 +54,6 @@
     }
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__row-header {
     display: flex;
     align-items: center;
diff --git a/packages/ui/src/fields/Array/index.tsx b/packages/ui/src/fields/Array/index.tsx
index 9ec2c7f47d..4c07d7f6aa 100644
--- a/packages/ui/src/fields/Array/index.tsx
+++ b/packages/ui/src/fields/Array/index.tsx
@@ -202,11 +202,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
         .join(' ')}
       id={`field-${path.replace(/\./g, '__')}`}
     >
-      {showError && (
-        <div className={`${baseClass}__error-wrap`}>
-          <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        </div>
-      )}
+      {showError && <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__header-content`}>
diff --git a/packages/ui/src/fields/Blocks/index.scss b/packages/ui/src/fields/Blocks/index.scss
index df0b1895be..9da705be8c 100644
--- a/packages/ui/src/fields/Blocks/index.scss
+++ b/packages/ui/src/fields/Blocks/index.scss
@@ -75,10 +75,6 @@
     line-height: unset;
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__rows {
     display: flex;
     flex-direction: column;
diff --git a/packages/ui/src/fields/Blocks/index.tsx b/packages/ui/src/fields/Blocks/index.tsx
index 3dd810e747..144e67049f 100644
--- a/packages/ui/src/fields/Blocks/index.tsx
+++ b/packages/ui/src/fields/Blocks/index.tsx
@@ -215,11 +215,7 @@ const _BlocksField: React.FC<BlocksFieldProps> = (props) => {
         .join(' ')}
       id={`field-${path.replace(/\./g, '__')}`}
     >
-      {showError && (
-        <div className={`${baseClass}__error-wrap`}>
-          <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-        </div>
-      )}
+      {showError && <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__heading-with-error`}>
diff --git a/packages/ui/src/fields/Checkbox/index.scss b/packages/ui/src/fields/Checkbox/index.scss
index 253a001b9c..b0808d693d 100644
--- a/packages/ui/src/fields/Checkbox/index.scss
+++ b/packages/ui/src/fields/Checkbox/index.scss
@@ -10,10 +10,6 @@
     margin-bottom: 0.2em;
     max-width: fit-content;
   }
-
-  &__error-wrap {
-    position: relative;
-  }
 }
 
 .checkbox-input {
diff --git a/packages/ui/src/fields/Checkbox/index.tsx b/packages/ui/src/fields/Checkbox/index.tsx
index ecb9c652c4..22af3fe834 100644
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -97,9 +97,7 @@ const CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
         width,
       }}
     >
-      <div className={`${baseClass}__error-wrap`}>
-        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-      </div>
+      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <CheckboxInput
         AfterInput={AfterInput}
         BeforeInput={BeforeInput}
diff --git a/packages/ui/src/fields/Code/index.tsx b/packages/ui/src/fields/Code/index.tsx
index b6da0a413d..02972a74e7 100644
--- a/packages/ui/src/fields/Code/index.tsx
+++ b/packages/ui/src/fields/Code/index.tsx
@@ -87,14 +87,14 @@ const CodeField: React.FC<CodeFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <div>
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
         {BeforeInput}
         <CodeEditor
           defaultLanguage={prismToMonacoLanguageMap[language] || language}
diff --git a/packages/ui/src/fields/ConfirmPassword/index.tsx b/packages/ui/src/fields/ConfirmPassword/index.tsx
index d6edcec71b..820196590c 100644
--- a/packages/ui/src/fields/ConfirmPassword/index.tsx
+++ b/packages/ui/src/fields/ConfirmPassword/index.tsx
@@ -50,21 +50,23 @@ export const ConfirmPassword: React.FC<ConfirmPasswordFieldProps> = (props) => {
         .filter(Boolean)
         .join(' ')}
     >
-      <FieldError path={path} />
       <FieldLabel
         htmlFor="field-confirm-password"
         label={t('authentication:confirmPassword')}
         required
       />
-      <input
-        autoComplete="off"
-        disabled={!!disabled}
-        id="field-confirm-password"
-        name="confirm-password"
-        onChange={setValue}
-        type="password"
-        value={(value as string) || ''}
-      />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError path={path} />
+        <input
+          autoComplete="off"
+          disabled={!!disabled}
+          id="field-confirm-password"
+          name="confirm-password"
+          onChange={setValue}
+          type="password"
+          value={(value as string) || ''}
+        />
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/DateTime/index.scss b/packages/ui/src/fields/DateTime/index.scss
index 71dd052956..1ca8b98ace 100644
--- a/packages/ui/src/fields/DateTime/index.scss
+++ b/packages/ui/src/fields/DateTime/index.scss
@@ -1,11 +1,5 @@
 @import '../../scss/styles.scss';
 
-.date-time-field {
-  &__error-wrap {
-    position: relative;
-  }
-}
-
 html[data-theme='light'] {
   .date-time-field {
     &--has-error {
diff --git a/packages/ui/src/fields/DateTime/index.tsx b/packages/ui/src/fields/DateTime/index.tsx
index 9fc59b73d8..b30ec7e0fb 100644
--- a/packages/ui/src/fields/DateTime/index.tsx
+++ b/packages/ui/src/fields/DateTime/index.tsx
@@ -90,16 +90,14 @@ const DateTimeField: React.FC<DateFieldProps> = (props) => {
         width,
       }}
     >
-      <div className={`${baseClass}__error-wrap`}>
-        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-      </div>
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <div className={`${baseClass}__input-wrapper`} id={`field-${path.replace(/\./g, '__')}`}>
+      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\./g, '__')}`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
         {BeforeInput}
         <DatePickerField
           {...datePickerProps}
diff --git a/packages/ui/src/fields/Email/index.tsx b/packages/ui/src/fields/Email/index.tsx
index c032f3e1c3..5c43177d0a 100644
--- a/packages/ui/src/fields/Email/index.tsx
+++ b/packages/ui/src/fields/Email/index.tsx
@@ -77,14 +77,14 @@ const EmailField: React.FC<EmailFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <div>
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
         {BeforeInput}
         <input
           autoComplete={autoComplete}
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
index c516e13d52..77f3cd4b88 100644
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -130,14 +130,15 @@ const JSONFieldComponent: React.FC<JSONFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <div>
+      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
         {BeforeInput}
         <CodeEditor
           defaultLanguage="json"
diff --git a/packages/ui/src/fields/Number/index.tsx b/packages/ui/src/fields/Number/index.tsx
index e6c5ad6d52..14223d0c1f 100644
--- a/packages/ui/src/fields/Number/index.tsx
+++ b/packages/ui/src/fields/Number/index.tsx
@@ -161,62 +161,64 @@ const NumberFieldComponent: React.FC<NumberFieldProps> = (props) => {
         required={required}
         {...(labelProps || {})}
       />
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-      {hasMany ? (
-        <ReactSelect
-          className={`field-${path.replace(/\./g, '__')}`}
-          disabled={readOnly}
-          filterOption={(_, rawInput) => {
-            // eslint-disable-next-line no-restricted-globals
-            const isOverHasMany = Array.isArray(value) && value.length >= maxRows
-            return isNumber(rawInput) && !isOverHasMany
-          }}
-          isClearable
-          isCreatable
-          isMulti
-          isSortable
-          noOptionsMessage={() => {
-            const isOverHasMany = Array.isArray(value) && value.length >= maxRows
-            if (isOverHasMany) {
-              return t('validation:limitReached', { max: maxRows, value: value.length + 1 })
-            }
-            return null
-          }}
-          // numberOnly
-          onChange={handleHasManyChange}
-          options={[]}
-          placeholder={t('general:enterAValue')}
-          showError={showError}
-          value={valueToRender as Option[]}
-        />
-      ) : (
-        <div>
-          {BeforeInput}
-          <input
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+        {hasMany ? (
+          <ReactSelect
+            className={`field-${path.replace(/\./g, '__')}`}
             disabled={readOnly}
-            id={`field-${path.replace(/\./g, '__')}`}
-            max={max}
-            min={min}
-            name={path}
-            onChange={handleChange}
-            onWheel={(e) => {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              e.target.blur()
+            filterOption={(_, rawInput) => {
+              // eslint-disable-next-line no-restricted-globals
+              const isOverHasMany = Array.isArray(value) && value.length >= maxRows
+              return isNumber(rawInput) && !isOverHasMany
             }}
-            placeholder={getTranslation(placeholder, i18n)}
-            step={step}
-            type="number"
-            value={typeof value === 'number' ? value : ''}
+            isClearable
+            isCreatable
+            isMulti
+            isSortable
+            noOptionsMessage={() => {
+              const isOverHasMany = Array.isArray(value) && value.length >= maxRows
+              if (isOverHasMany) {
+                return t('validation:limitReached', { max: maxRows, value: value.length + 1 })
+              }
+              return null
+            }}
+            // numberOnly
+            onChange={handleHasManyChange}
+            options={[]}
+            placeholder={t('general:enterAValue')}
+            showError={showError}
+            value={valueToRender as Option[]}
           />
-          {AfterInput}
-        </div>
-      )}
-      {CustomDescription !== undefined ? (
-        CustomDescription
-      ) : (
-        <FieldDescription {...(descriptionProps || {})} />
-      )}
+        ) : (
+          <div>
+            {BeforeInput}
+            <input
+              disabled={readOnly}
+              id={`field-${path.replace(/\./g, '__')}`}
+              max={max}
+              min={min}
+              name={path}
+              onChange={handleChange}
+              onWheel={(e) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                e.target.blur()
+              }}
+              placeholder={getTranslation(placeholder, i18n)}
+              step={step}
+              type="number"
+              value={typeof value === 'number' ? value : ''}
+            />
+            {AfterInput}
+          </div>
+        )}
+        {CustomDescription !== undefined ? (
+          CustomDescription
+        ) : (
+          <FieldDescription {...(descriptionProps || {})} />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Password/index.tsx b/packages/ui/src/fields/Password/index.tsx
index 84e4f5141d..37c88924e9 100644
--- a/packages/ui/src/fields/Password/index.tsx
+++ b/packages/ui/src/fields/Password/index.tsx
@@ -67,22 +67,25 @@ const PasswordField: React.FC<PasswordFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <input
-        autoComplete={autoComplete}
-        disabled={formProcessing || disabled}
-        id={`field-${path.replace(/\./g, '__')}`}
-        name={path}
-        onChange={setValue}
-        type="password"
-        value={(value as string) || ''}
-      />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+
+        <input
+          autoComplete={autoComplete}
+          disabled={formProcessing || disabled}
+          id={`field-${path.replace(/\./g, '__')}`}
+          name={path}
+          onChange={setValue}
+          type="password"
+          value={(value as string) || ''}
+        />
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss
index ea84d1d871..1759f25931 100644
--- a/packages/ui/src/fields/RadioGroup/index.scss
+++ b/packages/ui/src/fields/RadioGroup/index.scss
@@ -1,10 +1,6 @@
 @import '../../scss/styles.scss';
 
 .radio-group {
-  &__error-wrap {
-    position: relative;
-  }
-
   &--layout-horizontal {
     ul {
       display: flex;
diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
index 6d2b32f291..0c68e8e187 100644
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -99,57 +99,58 @@ const RadioGroupField: React.FC<RadioFieldProps> = (props) => {
         width,
       }}
     >
-      <div className={`${baseClass}__error-wrap`}>
-        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-      </div>
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>
-        {options.map((option) => {
-          let optionValue = ''
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
 
-          if (optionIsObject(option)) {
-            optionValue = option.value
-          } else {
-            optionValue = option
-          }
+        <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>
+          {options.map((option) => {
+            let optionValue = ''
 
-          const isSelected = String(optionValue) === String(value)
+            if (optionIsObject(option)) {
+              optionValue = option.value
+            } else {
+              optionValue = option
+            }
 
-          const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`
+            const isSelected = String(optionValue) === String(value)
 
-          return (
-            <li key={`${path} - ${optionValue}`}>
-              <Radio
-                id={id}
-                isSelected={isSelected}
-                onChange={() => {
-                  if (typeof onChangeFromProps === 'function') {
-                    onChangeFromProps(optionValue)
-                  }
+            const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`
 
-                  if (!readOnly) {
-                    setValue(optionValue)
-                  }
-                }}
-                option={optionIsObject(option) ? option : { label: option, value: option }}
-                path={path}
-                readOnly={readOnly}
-                uuid={uuid}
-              />
-            </li>
-          )
-        })}
-      </ul>
-      {CustomDescription !== undefined ? (
-        CustomDescription
-      ) : (
-        <FieldDescription {...(descriptionProps || {})} />
-      )}
+            return (
+              <li key={`${path} - ${optionValue}`}>
+                <Radio
+                  id={id}
+                  isSelected={isSelected}
+                  onChange={() => {
+                    if (typeof onChangeFromProps === 'function') {
+                      onChangeFromProps(optionValue)
+                    }
+
+                    if (!readOnly) {
+                      setValue(optionValue)
+                    }
+                  }}
+                  option={optionIsObject(option) ? option : { label: option, value: option }}
+                  path={path}
+                  readOnly={readOnly}
+                  uuid={uuid}
+                />
+              </li>
+            )
+          })}
+        </ul>
+        {CustomDescription !== undefined ? (
+          CustomDescription
+        ) : (
+          <FieldDescription {...(descriptionProps || {})} />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
index 0db05a2bf8..e8cb54fb41 100644
--- a/packages/ui/src/fields/Relationship/index.tsx
+++ b/packages/ui/src/fields/Relationship/index.tsx
@@ -471,116 +471,119 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      {!errorLoading && (
-        <div className={`${baseClass}__wrap`}>
-          <ReactSelect
-            backspaceRemovesValue={!drawerIsOpen}
-            components={{
-              MultiValueLabel,
-              SingleValue,
-            }}
-            customProps={{
-              disableKeyDown: drawerIsOpen,
-              disableMouseDown: drawerIsOpen,
-              onSave,
-              setDrawerIsOpen,
-            }}
-            disabled={readOnly || formProcessing || drawerIsOpen}
-            filterOption={enableWordBoundarySearch ? filterOption : undefined}
-            isLoading={isLoading}
-            isMulti={hasMany}
-            isSortable={isSortable}
-            onChange={
-              !readOnly
-                ? (selected) => {
-                    if (selected === null) {
-                      setValue(hasMany ? [] : null)
-                    } else if (hasMany) {
-                      setValue(
-                        selected
-                          ? selected.map((option) => {
-                              if (hasMultipleRelations) {
-                                return {
-                                  relationTo: option.relationTo,
-                                  value: option.value,
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+
+        {!errorLoading && (
+          <div className={`${baseClass}__wrap`}>
+            <ReactSelect
+              backspaceRemovesValue={!drawerIsOpen}
+              components={{
+                MultiValueLabel,
+                SingleValue,
+              }}
+              customProps={{
+                disableKeyDown: drawerIsOpen,
+                disableMouseDown: drawerIsOpen,
+                onSave,
+                setDrawerIsOpen,
+              }}
+              disabled={readOnly || formProcessing || drawerIsOpen}
+              filterOption={enableWordBoundarySearch ? filterOption : undefined}
+              isLoading={isLoading}
+              isMulti={hasMany}
+              isSortable={isSortable}
+              onChange={
+                !readOnly
+                  ? (selected) => {
+                      if (selected === null) {
+                        setValue(hasMany ? [] : null)
+                      } else if (hasMany) {
+                        setValue(
+                          selected
+                            ? selected.map((option) => {
+                                if (hasMultipleRelations) {
+                                  return {
+                                    relationTo: option.relationTo,
+                                    value: option.value,
+                                  }
                                 }
-                              }
 
-                              return option.value
-                            })
-                          : null,
-                      )
-                    } else if (hasMultipleRelations) {
-                      setValue({
-                        relationTo: selected.relationTo,
-                        value: selected.value,
-                      })
-                    } else {
-                      setValue(selected.value)
+                                return option.value
+                              })
+                            : null,
+                        )
+                      } else if (hasMultipleRelations) {
+                        setValue({
+                          relationTo: selected.relationTo,
+                          value: selected.value,
+                        })
+                      } else {
+                        setValue(selected.value)
+                      }
                     }
-                  }
-                : undefined
-            }
-            onInputChange={(newSearch) => handleInputChange(newSearch, value)}
-            onMenuClose={() => {
-              menuIsOpen.current = false
-            }}
-            onMenuOpen={() => {
-              menuIsOpen.current = true
+                  : undefined
+              }
+              onInputChange={(newSearch) => handleInputChange(newSearch, value)}
+              onMenuClose={() => {
+                menuIsOpen.current = false
+              }}
+              onMenuOpen={() => {
+                menuIsOpen.current = true
 
-              if (!hasLoadedFirstPageRef.current) {
-                setIsLoading(true)
+                if (!hasLoadedFirstPageRef.current) {
+                  setIsLoading(true)
+                  void getResults({
+                    lastLoadedPage: {},
+                    onSuccess: () => {
+                      hasLoadedFirstPageRef.current = true
+                      setIsLoading(false)
+                    },
+                    value: initialValue,
+                  })
+                }
+              }}
+              onMenuScrollToBottom={() => {
                 void getResults({
-                  lastLoadedPage: {},
-                  onSuccess: () => {
-                    hasLoadedFirstPageRef.current = true
-                    setIsLoading(false)
-                  },
+                  lastFullyLoadedRelation,
+                  lastLoadedPage,
+                  search,
+                  sort: false,
                   value: initialValue,
                 })
-              }
-            }}
-            onMenuScrollToBottom={() => {
-              void getResults({
-                lastFullyLoadedRelation,
-                lastLoadedPage,
-                search,
-                sort: false,
-                value: initialValue,
-              })
-            }}
-            options={options}
-            showError={showError}
-            value={valueToRender ?? null}
-          />
-          {!readOnly && allowCreate && (
-            <AddNewRelation
-              {...{
-                dispatchOptions,
-                hasMany,
-                options,
-                path,
-                relationTo,
-                setValue,
-                value,
               }}
+              options={options}
+              showError={showError}
+              value={valueToRender ?? null}
             />
-          )}
-        </div>
-      )}
-      {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
-      {CustomDescription !== undefined ? (
-        CustomDescription
-      ) : (
-        <FieldDescription {...(descriptionProps || {})} />
-      )}
+            {!readOnly && allowCreate && (
+              <AddNewRelation
+                {...{
+                  dispatchOptions,
+                  hasMany,
+                  options,
+                  path,
+                  relationTo,
+                  setValue,
+                  value,
+                }}
+              />
+            )}
+          </div>
+        )}
+        {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
+        {CustomDescription !== undefined ? (
+          CustomDescription
+        ) : (
+          <FieldDescription {...(descriptionProps || {})} />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Select/index.tsx b/packages/ui/src/fields/Select/index.tsx
index 6131776eb9..2d21cfa552 100644
--- a/packages/ui/src/fields/Select/index.tsx
+++ b/packages/ui/src/fields/Select/index.tsx
@@ -149,14 +149,15 @@ const SelectField: React.FC<SelectFieldProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      <div>
+      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
         {BeforeInput}
         <ReactSelect
           disabled={readOnly}
diff --git a/packages/ui/src/fields/Text/Input.tsx b/packages/ui/src/fields/Text/Input.tsx
index 0a2dc7e30c..200edd87ef 100644
--- a/packages/ui/src/fields/Text/Input.tsx
+++ b/packages/ui/src/fields/Text/Input.tsx
@@ -60,61 +60,64 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      {hasMany ? (
-        <ReactSelect
-          className={`field-${path.replace(/\./g, '__')}`}
-          disabled={readOnly}
-          // prevent adding additional options if maxRows is reached
-          filterOption={() =>
-            !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)
-          }
-          isClearable
-          isCreatable
-          isMulti
-          isSortable
-          noOptionsMessage={() => {
-            const isOverHasMany = Array.isArray(value) && value.length >= maxRows
-            if (isOverHasMany) {
-              return t('validation:limitReached', { max: maxRows, value: value.length + 1 })
-            }
-            return null
-          }}
-          onChange={onChange}
-          options={[]}
-          placeholder={t('general:enterAValue')}
-          showError={showError}
-          value={valueToRender}
-        />
-      ) : (
-        <div>
-          {BeforeInput}
-          <input
-            data-rtl={rtl}
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+
+        {hasMany ? (
+          <ReactSelect
+            className={`field-${path.replace(/\./g, '__')}`}
             disabled={readOnly}
-            id={`field-${path?.replace(/\./g, '__')}`}
-            name={path}
+            // prevent adding additional options if maxRows is reached
+            filterOption={() =>
+              !maxRows ? true : !(Array.isArray(value) && maxRows && value.length >= maxRows)
+            }
+            isClearable
+            isCreatable
+            isMulti
+            isSortable
+            noOptionsMessage={() => {
+              const isOverHasMany = Array.isArray(value) && value.length >= maxRows
+              if (isOverHasMany) {
+                return t('validation:limitReached', { max: maxRows, value: value.length + 1 })
+              }
+              return null
+            }}
             onChange={onChange}
-            onKeyDown={onKeyDown}
-            placeholder={getTranslation(placeholder, i18n)}
-            ref={inputRef}
-            type="text"
-            value={value || ''}
+            options={[]}
+            placeholder={t('general:enterAValue')}
+            showError={showError}
+            value={valueToRender}
           />
-          {AfterInput}
-        </div>
-      )}
-      {CustomDescription !== undefined ? (
-        CustomDescription
-      ) : (
-        <FieldDescription {...(descriptionProps || {})} />
-      )}
+        ) : (
+          <div>
+            {BeforeInput}
+            <input
+              data-rtl={rtl}
+              disabled={readOnly}
+              id={`field-${path?.replace(/\./g, '__')}`}
+              name={path}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              placeholder={getTranslation(placeholder, i18n)}
+              ref={inputRef}
+              type="text"
+              value={value || ''}
+            />
+            {AfterInput}
+          </div>
+        )}
+        {CustomDescription !== undefined ? (
+          CustomDescription
+        ) : (
+          <FieldDescription {...(descriptionProps || {})} />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Textarea/Input.tsx b/packages/ui/src/fields/Textarea/Input.tsx
index 4550be9ef0..185bd8a436 100644
--- a/packages/ui/src/fields/Textarea/Input.tsx
+++ b/packages/ui/src/fields/Textarea/Input.tsx
@@ -54,36 +54,38 @@ export const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         width,
       }}
     >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
       <FieldLabel
         CustomLabel={CustomLabel}
         label={label}
         required={required}
         {...(labelProps || {})}
       />
-      {BeforeInput}
-      <label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
-        <div className="textarea-inner">
-          <div className="textarea-clone" data-value={value || placeholder || ''} />
-          <textarea
-            className="textarea-element"
-            data-rtl={rtl}
-            disabled={readOnly}
-            id={`field-${path.replace(/\./g, '__')}`}
-            name={path}
-            onChange={onChange}
-            placeholder={getTranslation(placeholder, i18n)}
-            rows={rows}
-            value={value || ''}
-          />
-        </div>
-      </label>
-      {AfterInput}
-      {CustomDescription !== undefined ? (
-        CustomDescription
-      ) : (
-        <FieldDescription {...(descriptionProps || {})} />
-      )}
+      <div className={`${fieldBaseClass}__wrap`}>
+        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
+        {BeforeInput}
+        <label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
+          <div className="textarea-inner">
+            <div className="textarea-clone" data-value={value || placeholder || ''} />
+            <textarea
+              className="textarea-element"
+              data-rtl={rtl}
+              disabled={readOnly}
+              id={`field-${path.replace(/\./g, '__')}`}
+              name={path}
+              onChange={onChange}
+              placeholder={getTranslation(placeholder, i18n)}
+              rows={rows}
+              value={value || ''}
+            />
+          </div>
+        </label>
+        {AfterInput}
+        {CustomDescription !== undefined ? (
+          CustomDescription
+        ) : (
+          <FieldDescription {...(descriptionProps || {})} />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/ui/src/fields/Upload/Input.tsx b/packages/ui/src/fields/Upload/Input.tsx
index b74581855a..a380073c2e 100644
--- a/packages/ui/src/fields/Upload/Input.tsx
+++ b/packages/ui/src/fields/Upload/Input.tsx
@@ -133,56 +133,59 @@ export const UploadInput: React.FC<UploadInputProps> = (props) => {
           width,
         }}
       >
-        <FieldError CustomError={CustomError} {...(errorProps || {})} />
         <FieldLabel
           CustomLabel={CustomLabel}
           label={label}
           required={required}
           {...(labelProps || {})}
         />
-        {collection?.upload && (
-          <React.Fragment>
-            {fileDoc && !missingFile && (
-              <FileDetails
-                collectionSlug={relationTo}
-                doc={fileDoc}
-                handleRemove={
-                  readOnly
-                    ? undefined
-                    : () => {
-                        onChange(null)
-                      }
-                }
-                uploadConfig={collection.upload}
-              />
-            )}
-            {(!fileDoc || missingFile) && (
-              <div className={`${baseClass}__wrap`}>
-                <div className={`${baseClass}__buttons`}>
-                  <DocumentDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
-                    <Button buttonStyle="secondary" disabled={readOnly} el="div">
-                      {t('fields:uploadNewLabel', {
-                        label: getTranslation(collection.labels.singular, i18n),
-                      })}
-                    </Button>
-                  </DocumentDrawerToggler>
-                  <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
-                    <Button buttonStyle="secondary" disabled={readOnly} el="div">
-                      {t('fields:chooseFromExisting')}
-                    </Button>
-                  </ListDrawerToggler>
+        <div className={`${fieldBaseClass}__wrap`}>
+          <FieldError CustomError={CustomError} {...(errorProps || {})} />
+
+          {collection?.upload && (
+            <React.Fragment>
+              {fileDoc && !missingFile && (
+                <FileDetails
+                  collectionSlug={relationTo}
+                  doc={fileDoc}
+                  handleRemove={
+                    readOnly
+                      ? undefined
+                      : () => {
+                          onChange(null)
+                        }
+                  }
+                  uploadConfig={collection.upload}
+                />
+              )}
+              {(!fileDoc || missingFile) && (
+                <div className={`${baseClass}__wrap`}>
+                  <div className={`${baseClass}__buttons`}>
+                    <DocumentDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
+                      <Button buttonStyle="secondary" disabled={readOnly} el="div">
+                        {t('fields:uploadNewLabel', {
+                          label: getTranslation(collection.labels.singular, i18n),
+                        })}
+                      </Button>
+                    </DocumentDrawerToggler>
+                    <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
+                      <Button buttonStyle="secondary" disabled={readOnly} el="div">
+                        {t('fields:chooseFromExisting')}
+                      </Button>
+                    </ListDrawerToggler>
+                  </div>
                 </div>
-              </div>
-            )}
-            {CustomDescription !== undefined ? (
-              CustomDescription
-            ) : (
-              <FieldDescription {...(descriptionProps || {})} />
-            )}
-          </React.Fragment>
-        )}
-        {!readOnly && <DocumentDrawer onSave={onSave} />}
-        {!readOnly && <ListDrawer onSelect={onSelect} />}
+              )}
+              {CustomDescription !== undefined ? (
+                CustomDescription
+              ) : (
+                <FieldDescription {...(descriptionProps || {})} />
+              )}
+            </React.Fragment>
+          )}
+          {!readOnly && <DocumentDrawer onSave={onSave} />}
+          {!readOnly && <ListDrawer onSelect={onSelect} />}
+        </div>
       </div>
     )
   }
diff --git a/packages/ui/src/forms/FieldError/index.scss b/packages/ui/src/forms/FieldError/index.scss
index f920f8b734..34d360e6de 100644
--- a/packages/ui/src/forms/FieldError/index.scss
+++ b/packages/ui/src/forms/FieldError/index.scss
@@ -2,8 +2,6 @@
 
 .field-error.tooltip {
   font-family: var(--font-body);
-  top: 0;
-  bottom: auto;
   left: auto;
   max-width: 75%;
   right: calc(var(--base) * 0.5);
@@ -12,5 +10,6 @@
 
   &::after {
     border-top-color: var(--theme-error-500);
+    border-bottom-color: var(--theme-error-500);
   }
 }
diff --git a/packages/ui/src/forms/FieldError/index.tsx b/packages/ui/src/forms/FieldError/index.tsx
index b6011b7745..b6ebbf7a2a 100644
--- a/packages/ui/src/forms/FieldError/index.tsx
+++ b/packages/ui/src/forms/FieldError/index.tsx
@@ -30,9 +30,9 @@ const DefaultFieldError: React.FC<ErrorProps> = (props) => {
   const message = messageFromProps || errorMessage
   const showMessage = showErrorFromProps || (hasSubmitted && valid === false)
 
-  if (showMessage) {
+  if (showMessage && message?.length) {
     return (
-      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0}>
+      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>
         {message}
       </Tooltip>
     )
diff --git a/packages/ui/src/forms/RenderFields/index.scss b/packages/ui/src/forms/RenderFields/index.scss
index 41fd8a8800..5d00c448db 100644
--- a/packages/ui/src/forms/RenderFields/index.scss
+++ b/packages/ui/src/forms/RenderFields/index.scss
@@ -11,8 +11,13 @@
     --spacing-field: 0;
   }
 
+  .field-type__wrap {
+    position: relative;
+  }
+
   & > .field-type {
     margin-bottom: var(--spacing-field);
+    position: relative;
 
     &[type='hidden'] {
       margin-bottom: 0;
diff --git a/packages/ui/src/hooks/useIntersect.ts b/packages/ui/src/hooks/useIntersect.ts
index a5108fdff1..ff6ff6b8e5 100644
--- a/packages/ui/src/hooks/useIntersect.ts
+++ b/packages/ui/src/hooks/useIntersect.ts
@@ -12,7 +12,7 @@ export const useIntersect = (
   const [node, setNode] = useState(null)
 
   const observer = useRef(
-    typeof window !== 'undefined' && 'IntersectionObserver' in window
+    typeof window !== 'undefined' && 'IntersectionObserver' in window && !disable
       ? new window.IntersectionObserver(([ent]) => updateEntry(ent), {
           root,
           rootMargin,