Controlled Select Not working as expected

[premdasvm]

I've been trying to use the ControlledSelect component, but it's not behaving as expected. Even after selecting a value, the form validation error persists. Could you provide an example to help me understand how to use it correctly?

[yjose]

Hey @premdasvm, yeah sure here is an example of login screen with role attribute

import { zodResolver } from '@hookform/resolvers/zod';
import React from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import * as z from 'zod';

import { Button, ControlledInput, ControlledSelect, Text, View } from '@/ui';

const schema = z.object({
  name: z.string().optional(),
  email: z
    .string({
      required_error: 'Email is required',
    })
    .email('Invalid email format'),
  role: z.enum(['admin', 'user', 'moderator']),
  password: z
    .string({
      required_error: 'Password is required',
    })
    .min(6, 'Password must be at least 6 characters'),
});

export type FormType = z.infer<typeof schema>;

export type LoginFormProps = {
  onSubmit?: SubmitHandler<FormType>;
};

export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
  const { handleSubmit, control } = useForm<FormType>({
    resolver: zodResolver(schema),
  });
  return (
    <View className="flex-1 justify-center p-4">
      <Text testID="form-title" variant="h1" className="pb-6 text-center">
        Sign In
      </Text>

      <ControlledInput
        testID="name"
        control={control}
        name="name"
        label="Name"
      />

      <ControlledInput
        testID="email-input"
        control={control}
        name="email"
        label="Email"
      />
      <ControlledInput
        testID="password-input"
        control={control}
        name="password"
        label="Password"
        placeholder="***"
        secureTextEntry={true}
      />
      <ControlledSelect
        name="role"
        control={control}
        label="Role"
        options={[
          { label: 'User', value: 'user' },
          { label: 'Moderator', value: 'moderator' },
          { label: 'Admin', value: 'admin' },
        ]}
      />
      <Button
        testID="login-button"
        label="Login"
        onPress={handleSubmit(onSubmit)}
        variant="primary"
      />
    </View>
  );
};

i just tried it in real app, let me know if its working as expected for you

[premdasvm]

@yjose Thanks mate, I was passing the value again to the component, thats what was messing with my validation. haha

[premdasvm]

@yjose do you have a preferred way that you use MultiSelect?