Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

311
Visualizações
Is there any way to use mui autocomplete with formik reusably?

I have a mui autocomplete component. I am trying to reuse this autocomplete component with a form where formik validation added. My autocomplete component is,

const CustomAutoCompleteField = props => {
    const {rerenderAutocomplete, data, refetchCategoryData, autoCompleteFieldsData, inputLabel, autoCompleteFieldsInputOnChange , onTouch, onErrors,fieldProps, onBlur} = props
    const [textFieldData, setTextFieldData] = useState(null)
    const onChangeHandler = (event, value) =>{


    }
  
    return (
        <>
         
            <Autocomplete
                key={rerenderAutocomplete}
                // value={onEdit && data}
                isOptionEqualToValue={(option, value) => option.name === value.name}
                onBlur={onBlur}
                onChange={onChangeHandler}
                fullWidth
                id="tags-outlined"
                options={autoCompleteFieldsData ? autoCompleteFieldsData : top100Films }
                getOptionLabel={(option) => option.name}
                filterSelectedOptions
                renderInput={(params) => (<TextField
                    required
                    {...params}
                    label={inputLabel}
                    onChange={textFieldInputOnChange}
                    error={Boolean(onTouch && onErrors)}
                    helperText={onTouch && onErrors}
                    {...fieldProps}
                />)}
            />
        </>
    );
};

Here I am passing formik attributes in side props which are, onTouch, onErrors,fieldProps, onBlur.

In My Parent component, i am using this autocomplete field by giving props, which are,

  <CustomAutoCompleteField inputLabel='Select Category'
                                                     onBlur={addNewServiceFormik.handleBlur}
                                                     onTouch={addNewServiceFormik.touched.selectedCategoryName}
                                                     onErrors={addNewServiceFormik.errors.selectedCategoryName}
                                                     fieldProps={addNewServiceFormik.getFieldProps('selectedCategoryName')}
                            />

I don,t know why, when i click submit on my form, this autocomplete doesn't show any helper text as per formik validation.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda