fix combo box in glass

src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx

@@ -81,4 +81,3 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
         </section>
     );
 };
-

src/components/combobox/Combobox.tsx

@@ -4,7 +4,8 @@ import clsx from "clsx";
 import { motion, Variants } from "framer-motion";
 import { Icon, SearchNormal } from "iconsax-react";
 import { ChevronDown } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
 export interface ComboboxOption {
   id: string;
@@ -28,6 +29,12 @@ type Props = {
   ) => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 
+type DropdownPosition = {
+  top: number;
+  left: number;
+  width: number;
+};
+
 function Combobox({
   title,
   options,
@@ -37,17 +44,53 @@ function Combobox({
   selectedId,
   searchable = true,
   onSelectionChange,
+  className,
   ...props
 }: Props) {
   const [expand, setExpand] = useState(expanded);
   const [searchValue, setSearchValue] = useState("");
+  const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition | null>(null);
   const boxRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const updateDropdownPosition = useCallback(() => {
+    if (!triggerRef.current) return;
+
+    const rect = triggerRef.current.getBoundingClientRect();
+    setDropdownPosition({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!expand) {
+      setDropdownPosition(null);
+      return;
+    }
+
+    updateDropdownPosition();
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    window.addEventListener("resize", updateDropdownPosition);
+
+    return () => {
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+      window.removeEventListener("resize", updateDropdownPosition);
+    };
+  }, [expand, updateDropdownPosition]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
-        setExpand(false);
+      if (
+        boxRef.current?.contains(target) ||
+        dropdownRef.current?.contains(target)
+      ) {
+        return;
       }
+      setExpand(false);
     };
 
     if (expand) {
@@ -72,12 +115,14 @@ function Combobox({
     e: React.MouseEvent<HTMLDivElement, MouseEvent>,
     index: number,
   ) => {
-    e.stopPropagation(); // prevent toggle
+    e.stopPropagation();
     onSelectionChange(e, index);
     setExpand(false);
   };
 
   const selectedOption = options.find((x) => x.id === selectedId);
+  const filteredOptions = options.filter((v) => v.title?.includes(searchValue));
+
   const activeIcon =
     selectedOption?.icon &&
     React.createElement(selectedOption.icon, {
@@ -93,7 +138,7 @@ function Combobox({
     collapse: {
       opacity: 0,
       scale: 0.95,
-      pointerEvents: "none", // disable clicks
+      pointerEvents: "none",
       transition: {
         duration: 0.1,
         ease: "easeInOut",
@@ -102,7 +147,7 @@ function Combobox({
     expand: {
       opacity: 1,
       scale: 1,
-      pointerEvents: "auto", // re-enable clicks
+      pointerEvents: "auto",
       transition: {
         duration: 0.1,
         ease: "easeInOut",
@@ -110,13 +155,84 @@ function Combobox({
     },
   };
 
+  const dropdown =
+    expand &&
+    dropdownPosition &&
+    typeof document !== "undefined"
+      ? createPortal(
+          <motion.div
+            ref={dropdownRef}
+            data-expand={expand}
+            aria-hidden={!expand}
+            className="fixed text-foreground bg-container rounded-xl border border-border shadow-lg z-9999"
+            style={{
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              width: dropdownPosition.width,
+            }}
+            role="listbox"
+            aria-label={`${title} options`}
+            onClick={(e) => e.stopPropagation()}
+            initial="collapse"
+            animate="expand"
+            variants={variants}
+          >
+            {searchable && (
+              <div className="w-full flex gap-2 border-b border-border px-3 items-center">
+                <SearchNormal size={16} className="stroke-gray-400" />
+                <input
+                  placeholder="جستجو ..."
+                  className="w-full outline-none text-sm2 pb-2 pt-3"
+                  onChange={searchChanged}
+                  value={searchValue}
+                />
+              </div>
+            )}
+            <div className="flex flex-col p-1">
+              {filteredOptions.map((v) => {
+                const originalIndex = options.findIndex((o) => o.id === v.id);
+
+                return (
+                  <div
+                    onClick={(e) => setSelection(e, originalIndex)}
+                    key={v.id}
+                    data-selected={v.id === selectedId}
+                    className="flex gap-3 items-center justify-end px-2 py-2 cursor-pointer hover:bg-current/10 rounded-md last:rounded-b-xl"
+                    tabIndex={0}
+                    role="option"
+                    aria-selected={v.id === selectedId}
+                  >
+                    {v?.imagePath ? (
+                      <span className="icon-delivery shrink-0" aria-hidden />
+                    ) : (
+                      v?.icon &&
+                      React.createElement(v.icon, {
+                        size: 16,
+                        color: "currentColor",
+                        className:
+                          "inline-block shrink-0 text-primary dark:text-foreground",
+                      })
+                    )}
+                    <span className="text-sm2 tracking-[0.13px] leading-5 flex-1 text-right">
+                      {v.title}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </motion.div>,
+          document.body,
+        )
+      : null;
+
   return (
     <div
       ref={boxRef}
-      className={clsx("relative", props.className ?? "")}
+      className={clsx("relative", className)}
       {...props}
     >
       <div
+        ref={triggerRef}
         className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer"
         tabIndex={0}
         onClick={toggleExpand}
@@ -163,59 +279,7 @@ function Combobox({
         />
       </div>
 
-      <motion.div
+      {dropdown}
-        data-expand={expand}
-        aria-hidden={!expand}
-        className="absolute top-full left-0 w-full mt-1 text-foreground bg-container rounded-xl outline outline-solid outline-border shadow-lg z-10"
-        role="listbox"
-        aria-label={`${title} options`}
-        onClick={(e) => e.stopPropagation()}
-        initial="collapse"
-        animate={expand ? "expand" : "collapse"}
-        variants={variants}
-      >
-        {searchable && (
-          <div className="w-full flex gap-2 border-b border-border px-3 items-center">
-            <SearchNormal size={16} className="stroke-gray-400" />
-            <input
-              placeholder="جستجو ..."
-              className="w-full outline-none text-sm2 pb-2 pt-3"
-              onChange={searchChanged}
-              value={searchValue}
-            />
-          </div>
-        )}
-        <div className="p-1">
-          {options
-            .filter((v) => v.title?.includes(searchValue))
-            .map((v, i) => (
-              <div
-                onClick={(e) => setSelection(e, i)}
-                key={v.id}
-                data-selected={v.id === selectedId}
-                className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-current/10 rounded-md last:rounded-b-xl"
-                tabIndex={0}
-                role="option"
-                aria-selected
-              >
-                {v?.imagePath ? (
-                  <span className="icon-delivery mr-1" aria-hidden />
-                ) : (
-                  v?.icon &&
-                  React.createElement(v.icon, {
-                    size: 16,
-                    color: "currentColor",
-                    className:
-                      "inline-block mr-1 text-primary dark:text-foreground",
-                  })
-                )}
-                <span className="text-sm2 tracking-[0.13px] leading-5 w-full mt-1">
-                  {v.title}
-                </span>
-              </div>
-            ))}
-        </div>
-      </motion.div>
     </div>
   );
 }

src/components/input/InputField.tsx

@@ -1,48 +1,38 @@
-'use client';
+"use client";
 
-import React from 'react'
+import clsx from "clsx";
-import Tooltip from '../utils/Tooltip';
+import React from "react";
-import clsx from 'clsx';
+import Tooltip from "../utils/Tooltip";
 
 type Props = {
-    htmlFor: string;
+  htmlFor: string;
-    labelText?: React.ReactNode;
+  labelText?: React.ReactNode;
-    value?: string;
+  value?: string;
-    valid?: boolean
+  valid?: boolean;
-    inputClassName?: string;
+  inputClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
 
+const InputField = React.forwardRef<HTMLInputElement, Props>(({ onChange, htmlFor, labelText, children, valid = true, className, inputClassName, ...inputProps }, ref) => {
+  return (
+    <div spellCheck={false} className={`${className} ${valid ? "border-border" : "border-invalid"} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
+      <label className="absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-container" htmlFor={htmlFor}>
+        {labelText}
+      </label>
 
-const InputField = React.forwardRef<HTMLInputElement, Props>(
+      <Tooltip content={inputProps["aria-errormessage"]} hidden={!inputProps["aria-errormessage"]}>
-    ({ onChange, htmlFor, labelText, children, valid = true, className, inputClassName, ...inputProps }, ref) => {
+        <input
-        return (
+          ref={ref}
-            <div
+          onChange={onChange}
-                spellCheck={false}
+          className={clsx(inputProps["aria-errormessage"] && "text-red-300!", "py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!", inputClassName)}
-                className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
+          name={htmlFor}
-                <label
+          {...inputProps}
-                    className='absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-container'
+        />
-                    htmlFor={htmlFor}>
+        {children}
-                    {labelText}
+      </Tooltip>
-                </label>
+    </div>
+  );
+});
 
-                <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
+InputField.displayName = "InputField";
-                    <input
-                        ref={ref}
-                        onChange={onChange}
-                        className={clsx(
-                            inputProps['aria-errormessage'] && 'text-red-300!',
-                            'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!',
-                            inputClassName
-                        )}
-                        name={htmlFor}
-                        {...inputProps} />
-                    {children}
-                </Tooltip>
-            </div>
-        )
-    }
-)
 
-InputField.displayName = 'InputField'
+export default InputField;
-
-export default InputField

src/features/auth/components/StepEnterNumber.tsx

@@ -1,127 +1,112 @@
-'use client'
+"use client";
 
-import Button from '@/components/button/PrimaryButton'
+import { useOtpRequest } from "@/app/auth/login/hooks/useAuthData";
-import InputField from '@/components/input/InputField'
+import { LoginOTPRequestType } from "@/app/auth/login/types/Types";
-import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums'
+import Button from "@/components/button/PrimaryButton";
-import { LoginOTPRequestType } from '@/app/auth/login/types/Types'
+import InputField from "@/components/input/InputField";
-import Image from 'next/image'
+import { toast } from "@/components/Toast";
-import React, { useState } from 'react'
+import { AUTH_PAGE_ELEMENT, AUTH_STEP } from "@/enums";
-import type { ChangeEvent } from 'react'
+import { useCountdown } from "@/hooks/useCountdown";
-import { useTranslation } from 'react-i18next'
+import { extractErrorMessage } from "@/lib/func";
-import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
+import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
-import { useFormik } from 'formik'
+import { useFormik } from "formik";
-import * as Yup from 'yup'
+import Image from "next/image";
-import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
+import { useParams } from "next/navigation";
-import { useParams } from 'next/navigation'
+import type { ChangeEvent } from "react";
-import { toast } from '@/components/Toast'
+import { useState } from "react";
-import StepOtp from './StepOtp'
+import { useTranslation } from "react-i18next";
-import { extractErrorMessage } from '@/lib/func'
+import * as Yup from "yup";
-import { useCountdown } from '@/hooks/useCountdown'
+import StepOtp from "./StepOtp";
 
 type StepEnterNumberProps = {
-  pending?: boolean
+  pending?: boolean;
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  value?: string
+  value?: string;
-}
+};
 
 function StepEnterNumber(_props: StepEnterNumberProps = {}) {
-  void _props
+  void _props;
-
-  const { t } = useTranslation('auth')
-  const { name } = useParams()
-  const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
-  const { mutate: mutateOtpRequest, isPending } = useOtpRequest()
-  const { timerRunning, secondsLeft, restart } = useCountdown(
-    step === AUTH_STEP.ENTER_OTP,
-    120
-  )
 
+  const { t } = useTranslation("auth");
+  const { name } = useParams();
+  const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER);
+  const { mutate: mutateOtpRequest, isPending } = useOtpRequest();
+  const { timerRunning, secondsLeft, restart } = useCountdown(step === AUTH_STEP.ENTER_OTP, 120);
 
   const formik = useFormik<LoginOTPRequestType>({
     initialValues: {
-      phone: '',
+      phone: "",
-      slug: '',
+      slug: "",
     },
     validationSchema: Yup.object({
-      phone: Yup.string().required('Errors.PhoneNumberRequired').matches(/^09\d{9}$/, 'Errors.PhoneNumberFormat'),
+      phone: Yup.string()
+        .required("Errors.PhoneNumberRequired")
+        .matches(/^09\d{9}$/, "Errors.PhoneNumberFormat"),
     }),
     onSubmit: (values) => {
       if (name) {
-        values.slug = name as string
+        values.slug = name as string;
         mutateOtpRequest(values, {
           onSuccess: () => {
-            toast(t('otp_sent'), 'success')
+            toast(t("otp_sent"), "success");
-            setStep(AUTH_STEP.ENTER_OTP)
+            setStep(AUTH_STEP.ENTER_OTP);
           },
           onError: (error) => {
-            toast(extractErrorMessage(error), 'error')
+            toast(extractErrorMessage(error), "error");
-
+          },
-          }
+        });
-        })
       }
-    }
+    },
-  })
+  });
 
   const handleResendOtp = () => {
-    if (timerRunning || !name) return
+    if (timerRunning || !name) return;
 
     mutateOtpRequest(
       { phone: formik.values.phone, slug: name as string },
       {
         onSuccess: () => {
-          toast(t('otp_sent'), 'success')
+          toast(t("otp_sent"), "success");
-          restart()
+          restart();
         },
         onError: (error) => {
-          toast(extractErrorMessage(error), 'error')
+          toast(extractErrorMessage(error), "error");
         },
-      }
+      },
-    )
+    );
-  }
+  };
 
   return (
     <>
-      <Image
+      <Image className="object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2" src={"/assets/images/login-banner.png"} alt="login banner" width={100} height={100} unoptimized priority />
-        className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
+      <div className="w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10">
-        src={'/assets/images/login-banner.png'}
+        <div className="w-full">
-        alt='login banner'
+          <div className="pt-4">
-        width={100}
+            {step === AUTH_STEP.ENTER_NUMBER && (
-        height={100}
+              <>
-        unoptimized
+                <h6 className="text-lg font-bold">{t("Enter.Heading")}</h6>
-        priority
+                <p className="mt-3 text-[13px]">{t("Enter.Description")}</p>
-      />
+              </>
-      <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
+            )}
-        <div className='w-full'>
+            {step === AUTH_STEP.ENTER_OTP && (
-          <div className='pt-4'>
+              <>
-            {
+                <h6 className="text-lg font-bold">{t("OTP.Heading")}</h6>
-              step === AUTH_STEP.ENTER_NUMBER && (
+                <p className="mt-3 text-[13px]">{t("OTP.Description", { phoneNumber: formik.values.phone })}</p>
-                <>
+              </>
-                  <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
+            )}
-                  <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
-                </>
-              )
-            }
-            {
-              step === AUTH_STEP.ENTER_OTP && (
-                <>
-                  <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
-                  <p className='mt-3 text-[13px]'>{t('OTP.Description', { phoneNumber: formik.values.phone })}</p>
-                </>
-              )
-            }
           </div>
           {step === AUTH_STEP.ENTER_NUMBER && (
             <InputField
-              type='tel'
+              type="tel"
-              inputMode='tel'
+              inputMode="tel"
-              autoComplete='tel'
+              autoComplete="tel"
-              dir='ltr'
+              dir="ltr"
-              className={glassSurfaceFlat('mt-10 w-full')}
+              className={glassSurfaceFlat("mt-10 w-full")}
-              inputClassName='text-left dltr'
+              inputClassName="text-left dltr"
               htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-              labelText={t('Enter.LabelPhoneNumber')}
+              labelText={t("Enter.LabelPhoneNumber")}
-              {...formik.getFieldProps('phone')}
+              {...formik.getFieldProps("phone")}
-              placeholder='09120000000'
+              placeholder="09120000000"
             />
           )}
           {step === AUTH_STEP.ENTER_OTP && (
@@ -135,22 +120,14 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
             />
           )}
         </div>
-        {
+        {step === AUTH_STEP.ENTER_NUMBER && (
-          step === AUTH_STEP.ENTER_NUMBER && (
+          <Button disabled={!formik.isValid} pending={isPending} type="button" onClick={() => formik.handleSubmit()} className="dark:bg-white dark:text-black hover:dark:bg-white">
-            <Button
+            {t("Enter.ButtonSubmit")}
-              disabled={!formik.isValid}
+          </Button>
-              pending={isPending}
+        )}
-              type='button'
-              onClick={() => formik.handleSubmit()}
-              className='dark:bg-white dark:text-black hover:dark:bg-white'
-            >
-              {t('Enter.ButtonSubmit')}
-            </Button>
-          )
-        }
       </div>
     </>
-  )
+  );
 }
 
-export default StepEnterNumber
+export default StepEnterNumber;