fix(clerk-js): Make country code to mach the rest of the phone input …

…text color when it's disabled (#2810)
clerk · Feb 16, 2024 · 1073770 · 1073770
1 parent 45c9200
commit 1073770
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/quick-countries-notice.md b/.changeset/quick-countries-notice.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -145,7 +145,14 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
         }}
       >
         <Text
-          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}
+          sx={t => ({
+            position: 'absolute',
+            left: '1ch',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            pointerEvents: 'none',
+            opacity: props.isDisabled ? t.opacity.$disabled : 1,
+          })}
         >
           +{selectedCountryOption.country.code}
         </Text>