Formik + Chakra UI input Number don't work

Question

When I use Formik with Chakra input element the code don't work. If I use a normal input, the value of formik works fine, but when I use number input and set the initial values in Formik the number frozen. I try set in initial values a string, a number a string converted in Number but the results still the same. I found other old question about this, but haven't a right reply. Below follow my code:

import { useFormik } from 'formik';
import * as yup from 'yup';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

    import {
      Link,
      Container,
      Box,
      Input,
      Button,
      Text,
      FormControl,
      FormLabel,
      FormHelperText,
      InputGroup,
      InputLeftAddon,
      isSubmitting,
      NumberInput,
      NumberInputField,
      NumberInputStepper,
      NumberIncrementStepper,
      NumberDecrementStepper,
    } from '@chakra-ui/react';
    
    import { useAuth } from '../';
    
    const validationSchema = yup.object().shape({
      email: yup
        .string()
        .email('E-mail inválido')
        .required('Preenchimento obrigatório'),
      password: yup.string().required('Preenchimento obrigatório'),
      username: yup.string().required('Preenchimento obrigatório'),
      prefixo: yup.string().required('Preenchimento obrigatório'),
    });
    
    export default function SignUp() {
      const [auth, { signup }] = useAuth();
      const router = useRouter();
    
      const {
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
      } = useFormik({
        // eslint-disable-next-line no-shadow
        onSubmit: (values) => {
          alert(JSON.stringify(values, null, 2));
        },
    
        validationSchema,
        initialValues: {
          email: '',
          password: '',
          username: '',
          prefixo: Number(''),
        },
      });
    
      useEffect(() => {
        auth.user && router.push('/agenda');
      }, [auth.user, router]);
    
      return (
        <Box
          bg='var(--color-primary-dark)'
          w='100%'
          h='100vh'
          justifyContent='center'
          d='flex'
          alignItems='center'
        >
          <Container p={4} w='100vh' centerContent>
            <Box p={4} mt={8}>
              <Text color=' white' fontSize='4rem' fontFamily='Rajdhani'>
                Crie seu cadastro como Tio(a)
              </Text>
            </Box>
            <Box w='100%' d='grid' gridTemplateColumns='1fr 1fr'>
              <FormControl id='email' p={4} isRequired>
                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
                  Email
                </FormLabel>
                <Input
                  color='white'
                  textColor='whiteAlpha.900'
                  fontSize='2xl'
                  fontFamily='Poppins'
                  size='lg'
                  type='email'
                  height='3.5em'
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                {touched.email && (
                  <FormHelperText
                    fontSize='1.0em'
                    fontFamily='Poppins'
                    textColor='#e74c3c'
                  >
                    {errors.email}
                  </FormHelperText>
                )}
              </FormControl>
    
              <FormControl id='password' p={4} isRequired>
                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
                  Senha
                </FormLabel>
                <Input
                  textColor='whiteAlpha.900'
                  fontSize='2xl'
                  size='lg'
                  type='password'
                  height='3.5em'
                  value={values.password}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                {touched.password && (
                  <FormHelperText
                    fontSize='1.0em'
                    fontFamily='Poppins'
                    textColor='#e74c3c'
                  >
                    {errors.password}
                  </FormHelperText>
                )}
              </FormControl>
    
              <FormControl id='prefixo' p={4} isRequired>
                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
                  Prefixo
                </FormLabel>
                <NumberInput
                  type='prefixo'
                  name='prefixo'
                  size='lg'
                  value={values.prefixo}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  min={1}
                  max={250}
                  allowMouseWheel
                >
                  <NumberInputField
                    textColor='whiteAlpha.900'
                    fontFamily='Poppins'
                    fontSize='2xl'
                    height='3.5em'
                  />
    
                  <NumberInputStepper>
                    <NumberIncrementStepper
                      bg='green.200'
                      _active={{ bg: 'green.300' }}
                    />
                    <NumberDecrementStepper
                      bg='pink.200'
                      _active={{ bg: 'pink.300' }}
                    />
                  </NumberInputStepper>
                </NumberInput>
                {touched.prefixo && (
                  <FormHelperText
                    fontSize='1.0em'
                    fontFamily='Poppins'
                    textColor='#e74c3c'
                  >
                    {errors.prefixo}
                  </FormHelperText>
                )}
              </FormControl>
    
              <FormControl w='100%' id='username' p={4} isRequired>
                <FormLabel fontFamily='Poppins' color='#ddc3ff' fontSize='1.5em'>
                  Nome
                </FormLabel>
                <InputGroup size='lg'>
                  <InputLeftAddon
                    textColor='whiteAlpha.900'
                    fontFamily='Inter'
                    bg='#6842c2'
                    fontSize='2xl'
                    size='lg'
                    height='3.5em'
                    children='Tio(a)/'
                  />
                  <Input
                    textColor='whiteAlpha.900'
                    fontFamily='Poppins'
                    fontSize='2xl'
                    w='100%'
                    type='username'
                    height='3.5em'
                    value={values.username}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                </InputGroup>
                {touched.username && (
                  <FormHelperText
                    fontSize='1.0em'
                    fontFamily='Poppins'
                    textColor='#e74c3c'
                  >
                    {errors.username}
                  </FormHelperText>
                )}
              </FormControl>
            </Box>
            <Box w='50%' alignItems='center' justifyContent='center' p={4}>
              <Button
                fontFamily='Poppins'
                fontSize='1.2em'
                size='lg'
                height='2.5em'
                colorScheme='blue'
                width='100%'
                onClick={handleSubmit}
                isLoading={isSubmitting}
              >
                Cadastrar
              </Button>
            </Box>
    
            <Link href='/login' color='white' fontFamily='Poppins'>
              Já tem uma conta? Faça o Login
            </Link>
          </Container>
        </Box>
      );
    }

Answer 1

Even though I don't really like the approach, I've solved the issue by doing this:

<Field name='prefixo'>
  {({ field, form }) => (
    <FormControl id='prefixo'>
      <FormLabel htmlFor='prefixo'>Prefixo</FormLabel>
      <NumberInput
        id='prefixo'
        {...field}
        onChange={(val) =>
          form.setFieldValue(field.name, val)
        }
      >
        <NumberInputField />
        <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
        </NumberInputStepper>
      </NumberInput>
    </FormControl>
  )}
</Field>

You'd have to bring Field from Formik module:

import { Field } from 'formik';

Source: https://github.com/chakra-ui/chakra-ui/issues/617#issuecomment-616057308