fix(SW-360): remove container queries to fix stacking context bug affecting dropdowns in signup

2024-11-22 16:01:47 +01:00
parent 6f980fe9cd
commit 0d972367df
4 changed files with 75 additions and 86 deletions
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -78,69 +78,67 @@ export default function Phone({
  }

  return (
-    <div className={`${styles.wrapper} ${className}`}>
-      <div className={styles.phone}>
-        <CountrySelector
-          disabled={readOnly}
-          dropdownArrowClassName={styles.arrow}
-          flagClassName={styles.flag}
-          onSelect={handleSelectCountry}
-          preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
-          selectedCountry={country.iso2}
-          renderButtonWrapper={(props) => (
-            <button
-              {...props.rootProps}
-              className={styles.select}
-              tabIndex={0}
-              type="button"
-              data-testid="country-selector"
-            >
-              <Label required={!!registerOptions.required} size="small">
-                {intl.formatMessage({ id: "Country code" })}
-              </Label>
-              <span className={styles.selectContainer}>
-                {props.children}
-                <Body asChild fontOnly>
-                  <DialCodePreview
-                    className={styles.dialCode}
-                    dialCode={country.dialCode}
-                    prefix="+"
-                  />
-                </Body>
-                <ChevronDownIcon
-                  className={styles.chevron}
-                  color="grey80"
-                  height={18}
-                  width={18}
+    <div className={`${styles.phone} ${className}`}>
+      <CountrySelector
+        disabled={readOnly}
+        dropdownArrowClassName={styles.arrow}
+        flagClassName={styles.flag}
+        onSelect={handleSelectCountry}
+        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+        selectedCountry={country.iso2}
+        renderButtonWrapper={(props) => (
+          <button
+            {...props.rootProps}
+            className={styles.select}
+            tabIndex={0}
+            type="button"
+            data-testid="country-selector"
+          >
+            <Label required={!!registerOptions.required} size="small">
+              {intl.formatMessage({ id: "Country code" })}
+            </Label>
+            <span className={styles.selectContainer}>
+              {props.children}
+              <Body asChild fontOnly>
+                <DialCodePreview
+                  className={styles.dialCode}
+                  dialCode={country.dialCode}
+                  prefix="+"
                />
-              </span>
-            </button>
-          )}
-        />
-        <TextField
-          aria-label={ariaLabel}
-          defaultValue={field.value}
-          isDisabled={disabled ?? field.disabled}
-          isInvalid={fieldState.invalid}
-          isRequired={!!registerOptions?.required}
-          isReadOnly={readOnly}
-          name={field.name}
+              </Body>
+              <ChevronDownIcon
+                className={styles.chevron}
+                color="grey80"
+                height={18}
+                width={18}
+              />
+            </span>
+          </button>
+        )}
+      />
+      <TextField
+        aria-label={ariaLabel}
+        defaultValue={field.value}
+        isDisabled={disabled ?? field.disabled}
+        isInvalid={fieldState.invalid}
+        isRequired={!!registerOptions?.required}
+        isReadOnly={readOnly}
+        name={field.name}
+        type="tel"
+      >
+        <AriaInputWithLabel
+          {...field}
+          id={field.name}
+          label={label}
+          onChange={handleChange}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={!!registerOptions.required}
          type="tel"
-        >
-          <AriaInputWithLabel
-            {...field}
-            id={field.name}
-            label={label}
-            onChange={handleChange}
-            placeholder={placeholder}
-            readOnly={readOnly}
-            required={!!registerOptions.required}
-            type="tel"
-            value={inputValue}
-          />
-          <ErrorMessage errors={formState.errors} name={field.name} />
-        </TextField>
-      </div>
+          value={inputValue}
+        />
+        <ErrorMessage errors={formState.errors} name={field.name} />
+      </TextField>
    </div>
  )
 }