Reset React-Select (Unform) after Ubmit

Question

I’m studying Reactjs and Typescript, and also a lib for forms called Unform (https://github.com/Rocketseat/unform).

I have a form with some fields, among them a Select field (https://react-select.com/). My problem is: How to clear this React-select field after submitting the form?

Repository of my project: https://github.com/fredarend/icetec-frontend

The form is in: src/pages/Dashboard/indext.tsx and the Select component is in src/Components/Select/index.tsx.

Note that in the Dashboard index I’ve used the formRef.current?.reset() after sending the data to the API, however, it is resetting only the inputs, Select does not continue with filled.

I’m not getting to implement anything that works, someone might have done it already?

From now on, thank you very much for your help!

Answer 1

I didn’t get so many negatives..

I posted the same doubt in gringo stackoverflow, helped me and even gave +1..

Finally, I was able to solve using the solution of taking the ref from the field and cleaning only it:

const select = formRef!.current!.getFieldRef('technologies');
select.select.clearValue()

https://stackoverflow.com/questions/63782116/reset-react-select-unform-after-submit/63783359#63783359

Answer 2

Add these lines to registerField of its React-select component.

clearValue: (ref: any) => {
  ref.select.clearValue();
}

When the clear is called, either by:

formRef.current.clearField('field-name'); or

formRef.current.reset(); or

function handleSubmit(data, { reset }) {
    reset();
}

the clearValue will be called and the ref.select.clearValue() will clear the field.