Render wrong element

[rimzzlabs]

I have this mapping:

const BoardDescription = createUniqueFieldSchema(z.string(), 'board-description')

const mapping = [
  [z.string(), InputGroup],
  [BoardDescription, Textarea]
] as const

const schema = z.object({
  name: z
    .string()
    .min(4, 'At least 4 characters or more!')
    .describe(`Board's Name // Name your board`),
  description: BoardDescription.describe(`Board's Description // Describe what's this board about`)
})

export const ModalCreateBoard = () => {
  const [isOpen, , closeModal] = useModalBoard()
  const CreateBoardForm = createTsForm(mapping)

  const handleSubmit = (value: z.infer<typeof schema>) => {
    toast(`name: ${value.name}`)
    closeModal()
  }

  return (
    <BaseModal show={isOpen} onClose={closeModal} title='Create Board'>
      <CreateBoardForm
        schema={schema}
        onSubmit={handleSubmit}
        formProps={{
          className: 'space-y-3'
        }}
        renderAfter={() => (
          <StyledButton styleType='primary' className='max-w-max'>
            Submit
          </StyledButton>
        )}
      />
    </BaseModal>
  )
}

Here's the InputGroup component:

// the inputProps is just a type from React.InputHTMLAttributes

export const InputGroup = (props: InputProps) => {
  const { error, field } = useTsController<string>()
  const { placeholder, label } = useDescription()

  return (
    <div className='flex flex-col'>
      <label className='mb-2 text-sm font-semibold' htmlFor={props.id}>
        {label}
      </label>
      <Input
        className={clsxm(
          error?.errorMessage && 'border-danger-1 dark:border-danger-0.5',
          error?.errorMessage && 'focus:ring-danger-1 dark:focus:ring-danger-0.5',
          error?.errorMessage && 'placeholder:text-danger-1/50 dark:placeholder:text-danger-0.5/50'
        )}
        placeholder={placeholder}
        value={field.value ?? ''}
        onChange={(e) => {
          field.onChange(e.target.value)
        }}
      />
      {error?.errorMessage && (
        <span className='text-xs font-medium leading-relaxed mt-0.5 text-danger-1 dark:text-danger-0.5'>
          {error.errorMessage}
        </span>
      )}
    </div>
  )
}

Here's the Textarea component:

type TProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>

export const Textarea = (props: TProps) => {
  const { error, field } = useTsController<string>()
  const { label, placeholder } = useDescription()

  return (
    <div>
      <label htmlFor={props.id} className='mb-2 text-sm font-semibold'>
        {label}
      </label>

      <textarea
        id={props.id}
        className={clsxm(
          'w-full h-40 rounded resize-none p-2.5 overflow-y-auto',
          'border placeholder:text-sm text-sm outline-none',
          'bg-theme-2/40 border-theme-2',
          'focus:ring-2 focus:ring-primary-5',
          'dark:bg-theme-7/40 dark:border-theme-6 dark:text-theme-2 dark:ring-primary-7 dark:placeholder:text-theme-5',
          error?.errorMessage && 'bg-danger-0.25 border-danger-1 dark:border-danger-2'
        )}
        onBlur={field.onBlur}
        onChange={(e) => field.onChange(e.target.value)}
        value={field.value}
        placeholder={placeholder}
      />

      {error?.errorMessage && (
        <span className='text-xs font-medium leading-relaxed mt-0.5 text-danger-1 dark:text-danger-0.5'>
          {error.errorMessage}
        </span>
      )}
    </div>
  )
}

But it render the InputGroup element, not the Textarea element

How is it possible, and why? am I missing something?

[iway1]

it's a bug - thanks for the reproduction

createTsForm shouldn't be called within a component, should be at the top level