-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Usage with semantic ui #148
Comments
Btw, created a quick'n dirty hack for this: |
@tkvw You can create intermediate component which will handle these API inconsistencies for you. It's very common to create wrapper component over base |
That's correct, the event argument is of SyntheticEvent, but it does not have a target. So the default handleChange supplied by Formnik fails. I can't imagine how to create a Hoc for this, because it should overwrite behaviour of handleChange in the Formnik class. I can't update the state of this encapsulated component? The relevant quote from the discussion I've posted:
So, the second argument contains all the relevant target data (actually, everything you are looking from in event.target). |
Is there any further update on this? Semantic + Formik support would be great! |
Use setFieldValue |
I am sorry, but I don't see how setFieldValue solves this issue? |
Actually, nevermind. I created a hoc for this:
|
We wrote this change handler for the dropdown and then called it on change which worked. setFieldValue comes from the Formik functions which we're wrapping our form component in. const handleDropdownChange = (e, { name, value }) => setFieldValue(name, value) Then called it: <FormikDropdown
name="dueNumberOf"
placeholder="2"
value={values.dueNumberOf}
onChange={handleDropdownChange}
onBlur={handleBlur}
errors={errors.dueNumberOf}
options={createOptions(dueNumberOfValues)}
/> |
nice! |
@tkvw how do you use this wrapper? For example, how do I add an input and a dropdown while using this wrapper you wrote? Right now, I have to do the following??:
|
@davidhenley : I created a simplified version at https://codesandbox.io/s/2022n8ol1r |
@tkvw both of these examples set touched and dirty back to false when you change back to initial values. Dirty and touched should stay true after you touch them. What's the thought process behind checking for pristine values, instead of just saying setFieldTouched(name, true)?? Also, this will not work for input, because Form.Input does not have a data.name for onBlur, it has only a e.target.name So on the first one, I changed this to work:
|
@davidhenley : this is just a pointer to a 'hocable' solution for using semantic ui with Formik. There's no magic, just implement (and extend) the logic as you wish and use the |
just use |
Is any method integrate formik with semantic-ui? |
There's one which implements some basic functionality: https://www.npmjs.com/package/formik-semantic-ui |
Created a simple
so you can just
inside the Should work for almost all semantic ui form components. |
@mvanlonden how do you handle radio with the above wrapper? it cant seem to pass the value into the form state |
@mvanlonden For some reason if I backspace to the point where there is nothing on an input component, when using that wrapper I get a react error.
Otherwise, it works great. Do you know what might be the issue? |
Replacing |
eslint didn't like it though |
For those who land here like I did a few days ago because they're struggling to make Formik and Semantic-UI React work together: I pieced together a working solution based on mvanlonden's solution: formik-with-semantic-ui-react-form Comments are welcome. |
@gang89 - based on the solutions from @mvanlonden and @eboutin I've come up with the following that seems to work with radio groups. I'm still testing this but so far, so good.
|
@hoffmanilya thanks for your sharing this piece of code. Just tried it today, it works great but when I check a Form.Checkbox, and then uncheck the value remains |
@agrarian-systems - you can try the following. In my testing it works with both check boxes and radio groups.
|
Works perfectly fine ! Thanks !
So I changed it a little bit :
Thanks for your help ! |
@agrarian-systems - glad to hear it.
|
I made a slight change in your code. Any numerical field with initial value of 0 shows up as an empty string since value || '' captures 0 as a falsy value. |
Hello,
I like to use formik, but I use Semantic ui which does not emit onChange=>(event), but onChange=(event,data). See this discussion: Semantic-Org/Semantic-UI-React#638
Is it possible to support this?
The text was updated successfully, but these errors were encountered: