Appending the countries dropdown to body to prevent it being clipped (#5599)

gpressutto5 · web-flow · commit 131c3674ced0 · 2023-02-22T12:54:02.000-03:00
diff --git a/changelog/fix-phone-input-dropdown b/changelog/fix-phone-input-dropdown
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Appending the countries dropdown to body to prevent it being clipped
diff --git a/client/settings/phone-input/index.tsx b/client/settings/phone-input/index.tsx
@@ -77,6 +77,7 @@ const PhoneNumberInput = ( {
 				separateDialCode: true,
 				hiddenInput: 'full',
 				utilsScript: utils,
+				dropdownContainer: document.body,
 			} );
 			setInputInstance( iti );
 
diff --git a/client/settings/phone-input/style.scss b/client/settings/phone-input/style.scss
@@ -127,6 +127,10 @@
 .iti {
 	width: 100%;
 	margin-top: $gap-large;
+
+	&--container {
+		margin-top: 0;
+	}
 }
 
 .no-top-margin .iti {
