Input Field Shows "Selected" Value When Dialog Opens - React Hook Form Or ShadcnUI Issue

[SaidAlHendi]

I'm facing an issue where the value in an input field inside a dialog is displayed as "Selected" when the dialog opens. I’m using React Hook Form and Zod for form validation. Here’s a summary of the setup:

Screenshot:

Schema Definition:

import { z } from 'zod'
export const createProgramSchema = (features: any) => {
  const schema: Record<string, any> = {}
  for (const column in features) {
    const feature = features[column]
    if (feature.FeatureType === 'INT') {
      schema[column] = z
        .string()
        .nonempty({ message: `${column} is required` })
        .refine(
          (val) =>
            val >= (feature.FeatureMin ?? -Infinity) &&
            val <= (feature.FeatureMax ?? Infinity),
          {
            message: `${feature.FeatureName} must be between ${
              feature.FeatureMin ?? '-Infinity'
            } and ${feature.FeatureMax ?? 'Infinity'}`,
          }
        )
    } else {
      schema[column] = z.string().nonempty({ message: 'Selection required' })
    }
  }

  return z.object(schema)
}

export type ProgramFormValues = z.infer<ReturnType<typeof createProgramSchema>>

Field Renderer Component:

import { Controller, FieldErrors, FieldValues } from 'react-hook-form'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

type FieldRendererProps<T extends FieldValues> = {
  column: string
  control: any
  value: string
  setValue: (column: string, value: string, options?: any) => void
  errors: FieldErrors<T>
  setSelectedValues: React.Dispatch<
    React.SetStateAction<{ [key: string]: string | number }>
  >
}

const FieldRenderer = <T extends FieldValues>({
  column,
  control,
  value,
  setValue,
  setSelectedValues,
  errors,
}: FieldRendererProps<T>) => (
  <>
    <Label className='mb-2'>
      {column}: {value}
    </Label>
    <Controller
      name={column}
      control={control}
      defaultValue={value || 0}
      render={({ field }) => (
        <div>
          <Input
            type='number'
            value={field.value || ''} // Ensure value is a string
            onChange={(e) => {
              const newValue = e.target.value
              setSelectedValues((prevSelectedValues) => ({
                ...prevSelectedValues,
                [column]: newValue,
              }))
              field.onChange(newValue)
              setValue(column, newValue, { shouldDirty: true })
            }}
            className={`border rounded p-2 ${
              errors[column] ? 'border-red-500' : ''
            }`}
          />
          {errors[column] && (
            <p className='text-red-500 text-sm'>
              {String(errors[column]?.message ?? 'Unknown error')}
            </p>
          )}
        </div>
      )}
    />
  </>
)

export default FieldRenderer

Dialog Component:

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { useTranslation } from 'react-i18next'
import { Separator } from '../ui/separator'
import { DialogDescription } from '@radix-ui/react-dialog'
import { useState } from 'react'
import { useProgramFeatures } from '@/Hooks/useProgramFeatures'
import { usePopoverState } from '@/Hooks/usePopoverState'
import { Data, useProgramForm } from '@/Hooks/useProgramAddAndEditFormSchema'

import { ProgramFormValues } from '@/Schema/AddDuplicateProgrammSchema'
import FieldRenderer from '../Form/FieldRenderer'
import PopoverField from '../Form/PopoverField'

type Props = {
  onClose: () => void
  open: boolean
  ColumnsValue: Data[]
  columns: string[]
  ProgramID?: string
  StudNumber?: string
  Mode: 'Add' | 'Duplicate'
}

const AddDuplicateProgramDialog = ({
  onClose,
  open,
  columns,
  ColumnsValue: data,
  ProgramID,
  StudNumber,
  Mode,
}: Props) => {
  const { t } = useTranslation()
  const { openPopovers, togglePopover } = usePopoverState()
  const { getFeatureTypeMethod, ProgramDataValuesMethod } = useProgramFeatures()

  const {
    control,
    handleSubmit,
    setValue,
    isValid,
    dirtyFields,
    errors,
    isDirty,
  } = useProgramForm(columns, data, ProgramID as string)

  const ProgramDataValues = ProgramDataValuesMethod(
    ProgramID?.toString() as string,
    data
  )
  const [selectedValues, setSelectedValues] = useState<{
    [key: string]: string | number
  }>({})

  const onSubmit = (formData: ProgramFormValues) => {
    console.log('🚀 ~ formData:', formData)
  }
  const hasChanges = Object.keys(dirtyFields).length > 0
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className='flex flex-col md:min-w-[80%] xl:min-w-[60%] top-[25%] pb-4'>
        <DialogHeader>
          <DialogTitle>{t('T_Duplicate_Program')}</DialogTitle>
          <DialogDescription>
            {`Sie können das Programm mit der Bolzennummer ${StudNumber} einfach
            duplizieren oder weitere Kopien anfertigen`}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className='grid gap-4 grid-cols-4 w-full'>
            {columns.map((column) => {
              const featureType = getFeatureTypeMethod(column)
              const value = ProgramDataValues[column]?.toString() || ''

              return (
                <div key={column} className='flex flex-col w-full'>
                  {featureType === 'INT' ? (
                    <FieldRenderer
                      column={column}
                      control={control}
                      value={value}
                      setValue={setValue}
                      errors={errors}
                      setSelectedValues={setSelectedValues}
                    />
                  ) : (
                    <PopoverField
                      column={column}
                      ProgramDataValues={ProgramDataValues}
                      setValue={setValue}
                      selectedValues={selectedValues}
                      togglePopover={togglePopover}
                      openPopovers={openPopovers}
                      data={data}
                      setSelectedValues={setSelectedValues}
                      errors={errors}
                    />
                  )}
                </div>
              )
            })}
          </div>
          <Separator className='mt-2' />
          <DialogFooter className='w-full flex flex-1 grow justify-between pt-2'>
            <Button type='button' onClick={onClose} variant='outline'>
              {t('T_Cancel')}
            </Button>
            {Mode === 'Add' ? (
              <div className='flex gap-2'>
                <Button type='submit' disabled={!isValid}>
                  {t('T_Add_New_Program')}{' '}
                </Button>
              </div>
            ) : (
              <div className='flex gap-2'>
                <Button type='submit' disabled={!isValid || !hasChanges}>
                  {t('T_Duplicate_And_Further_Duplication')}
                </Button>
                <Button type='submit' disabled={!isValid || !hasChanges}>
                  {t('T_Duplicate')}
                </Button>
              </div>
            )}
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

export default AddDuplicateProgramDialog