Semantic React UI controlled components not working with React Final Form

[robdevil]

Bug report.

I'm using Semantic React UI 2.02 with react-final-form 6.5.3.

First Issue

I have a controlled Semantic React UI dropdown on a component that gets its value from the parent. If I put the Dropdown component directly into a React Final Form Field it works as expected. I can clear the currently selected value in the dropdown by updating the state value. But when I use a component you can see it ignores any change the parents tries to make to the state.

Not many examples out there to help guide me unfortunately.

Second Issue

Issue was "fixed" in 6.3.1 but still appears to exist.

#544

If I try to pass multiple to a custom component the value is ignored and always false.

Link to sandbox here click here for sandbox

Third Issue If you implement a wizard form and use a Semantic React UI dropdown on one of those forms. When you try to move back, the value selected on the dropdown is lost. Can't figure out a way to set it back again.

Would appreciate the wisdom of other users. Thanks in advance.

[fabioespinosa]

+1

[erikras]

In your sandbox, you shouldn't be managing flagId yourself. That's RFF's job. You should only pass a value prop to radio buttons or checkboxes.

It should look more like this: https://codesandbox.io/s/semantic-react-ui-react-final-form-how-to-clear-dropdown-forked-fy2e7?file=/src/index.tsx