Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error

* fix(BOOK-323): scroll to invalid element on submit on enter details

* fix(BOOK-323): update error message design

* fix(BOOK-323): clean up

* fix(BOOK-323): scroll to fields in room in right order

* fix(BOOK-323): add id to translations

* fix(BOOK-323): remove undefined

* fix(BOOK-323): fix submitting state

* fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo

* fix(BOOK-323): fix invalid border country

* fix(BOOK-323): use error message component

* fix(BOOK-323): fix invalid focused styling on mobile

* fix(BOOK-323): remove redundant dependency in callback


Approved-by: Erik Tiekstra

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -6,6 +6,7 @@ import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
 
@@ -35,7 +36,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   ref
 ) {
   const intl = useIntl()
-  const { control } = useFormContext()
+  const { control, formState } = useFormContext()
   const numberAttributes: HTMLAttributes<HTMLInputElement> = {}
   if (type === "number") {
     numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
@@ -87,10 +88,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             </Caption>
           ) : null}
           {fieldState.error && !hideError ? (
-            <Caption className={styles.error} fontOnly>
-              <MaterialIcon icon="info" color="Icon/Feedback/Error" />
-              {getErrorMessage(intl, fieldState.error.message)}
-            </Caption>
+            <ErrorMessage
+              errors={formState.errors}
+              name={name}
+              messageLabel={getErrorMessage(intl, fieldState.error.message)}
+            />
           ) : null}
         </TextField>
       )}