search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

astrouxds/react rux-button not Submitting Formik Form #94

Closed eagle-oa closed 2 years ago

eagle-oa commented 2 years ago

@astrouxds/react package rux-button isn’t submitting a formik form, even though it has type submit on it.
The following Code Sandbox replicates the issue:

https://codesandbox.io/s/wonderful-pascal-tddor?file=/src/index.js

micahjones13 commented 2 years ago

Thanks for raising this issue!

We have a couple solutions to this, the first being instead of using Formik's <Field>, using <RuxInput> and mapping onRuxInput to props.handleChange like so: 

<RuxInput name="title" onRuxinput={props.handleChange} />

This of course forfeits the benefits of using <Field> and will require you to map Formik's handlers to Rux events. You can find an example sandbox of this method here: https://codesandbox.io/s/trusting-johnson-5szmg?file=/src/NotWorking.js

The second method is using Formik's <useField> to mimic a RuxInput as a formik <Field>. This should allow you to retain the functionality of using <Field>, albeit with more work to define. Here is an example sandbox for that approach: https://codesandbox.io/s/relaxed-goldberg-bunq8?file=/src/Example.js

To add to the pile of links, here is an example from our Storybook using React with Formik and Yup for validation: https://astro-stencil.netlify.app/?path=/story/astro-uxds-patterns-forms-react--page

Please let us know if you would like more explanation or have any more questions. Thank you!