search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.38k stars 481 forks source link

Semantic React UI controlled components not working with React Final Form #939

Open robdevil opened 3 years ago

robdevil commented 3 years ago

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 commented 2 years ago

+1

erikras commented 2 years ago

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