feat: enhance PhoneInput component with mounted state for dropdown rendering

- Introduced a mounted state to manage the rendering of the dropdown container.
- Updated event listener cleanup to depend on the mounted state.
- Refactored dropdown rendering logic to use the portal container based on the mounted state.

Author: icortesdev

packages/survey-ui/src/components/general/phone-input.tsx

@@ -39,6 +39,7 @@ function PhoneInput({
 }: Readonly<PhoneInputProps>): React.JSX.Element {
   const [isOpen, setIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
+  const [mounted, setMounted] = React.useState(false);
   const [dropdownPosition, setDropdownPosition] = React.useState<{
     top: number;
     left: number;
@@ -48,6 +49,10 @@ function PhoneInput({
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const parseValue = React.useCallback((): { country: Country; phoneNumber: string } => {
     if (!value) {
       return { country: getDefaultCountry(), phoneNumber: "" };
@@ -122,6 +127,8 @@ function PhoneInput({
   }, [isOpen]);
 
   React.useEffect(() => {
+    if (!mounted) return;
+
     const handleClickOutside = (event: MouseEvent): void => {
       const target = event.target as Node;
       if (
@@ -145,10 +152,12 @@ function PhoneInput({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, mounted]);
 
   const hasError = Boolean(errorMessage);
 
+  const portalContainer = mounted && typeof document !== "undefined" ? document.body : null;
+
   return (
     <div className="space-y-1">
       <ElementError errorMessage={errorMessage} dir={dir} />
@@ -199,7 +208,7 @@ function PhoneInput({
           </button>
         </div>
 
-        {isOpen && dropdownPosition && typeof document !== "undefined"
+        {isOpen && dropdownPosition && portalContainer
           ? createPortal(
               <div
                 ref={dropdownRef}
@@ -262,7 +271,7 @@ function PhoneInput({
                   )}
                 </div>
               </div>,
-              document.body
+              portalContainer
             )
           : null}