Semantic React UI controlled components not working with React Final Form

182 Views Asked by At

This question has also been raised on the react-final-form github issues list at https://github.com/final-form/react-final-form/issues/939

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 https://codesandbox.io/s/semantic-react-ui-react-final-form-how-to-clear-dropdown-4l17f?file=/src/index.tsx

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.

0

There are 0 best solutions below