createPortal을 이용해 만든 모달 창 위에서 Shadcn/ui에서 가져온 select 을 사용하려고 하면 동작을 하지 않는 현상이 발생했다.

기본 html로 select과 otpion으로 만들게 되는 경우 작동을 하였고, 모달 창 밖에서 hadcn/ui에서 가져온 select이 정상적으로 동작을 한 것을 보아 직접 만든 모달창과 Shadcn/ui에서 가져온 select 컴포넌트의 동작 사이의 이슈임을 알 수 있었다.

이슈의 원인은 dialog에서 ref를 이용해 동작을 제어하면서 발생한것이었다.

'use client';

import { type ElementRef, useEffect, useRef } from 'react';

import { useRouter } from 'next/navigation';

export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const dialogRef = useRef<ElementRef<'dialog'>>(null);

  useEffect(() => {
    if (!dialogRef.current?.open) {
      dialogRef.current?.showModal();
    }
  }, []);

  function onDismiss() {
    router.back();
  }

  return (
    <div
      className={
        'fixed left-0 top-0  flex size-full flex-col items-center' +
        ' justify-center overflow-y-hidden bg-neutral-900/70 z-50'
      }
    >
      <dialog
        ref={dialogRef}
        className="mx-auto mt-[80px] flex h-[720px] w-[800px] min-w-[240px] max-w-full rounded-xl bg-white "
      >
        {children}
        <button
          onClick={onDismiss}
          className="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full border-none bg-transparent hover:bg-gray-200"
        >
          <span className="text-xl font-semibold text-black">X</span>
        </button>
      </dialog>
    </div>
  );
}