turner-industries / formik-semantic-ui Goto Github PK

When dealing with string textboxes, it makes sense to default null values to empty strings. However, when the type is numeric, the default value should be 0. This should be explicit though as undefined/null may have different implications than 0.

I personally think that at the API level, there should not be a difference in meaning between undefined/null and 0

Typescript complains when setting a value on a Radio element:

<Radio name='option' label='Option 1' value='option1' />
<Radio name='option' label='Option 2' value='option2' />

Type '{ name: string; label: string | object | (string | object)[] | undefined; value:'option1'; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. TS2322

Then manually adding an 'value: string' option to the definition it works (like plain JS).

Sample link
Based on the example, I would like to ask whether the errors message can be customized and placed in a specific position?

like this:

 return (
    <Form initialValues={stateUser} onSubmit={_handleSubmit}>
      <Input label="Email" name="emailAddress" />
      {/* <ErrorMessage name="emailAddress" /> */}
      <Form.Group widths="2">
        <Input label="First Name" name="firstName" />
        <Input label="Last Name" name="lastName" />
      </Form.Group>
      {
        <div>
          <div>error: Email</div>
          <div>error: First Name</div>
          <div>error: Last Name</div>
        </div>
      }
      <Button.Submit>Submit</Button.Submit>
      <Button.Reset>Cancel</Button.Reset>
    </Form>
  );

I had made a quick (and maybe incorrect) implementation of the TypeScript type definition:

https://gist.github.com/littlebtc/0effc6ab4cec4a56346b1bd877238424

I think it is better to include an official type definition as I am switching to TypeScript development and I am trying to use this library.

All the Semantic UI Form statics are copied onto this Formik Form. Add these to the type files. Ex:

public static Field: typeof FormField;

Is there a way to access Formik status? I see that handleSubmit and isSubmitting are bound automatically, but I don't see status.

Automatically binds Formik handleSubmit for Semantic UI Form onSubmit
Automatically binds Formik isSubmitting for Semantic UI Form loading

We've been using status for feedback messages after server-side validation. Any pointers? Thanks.

This happens when you apply the validation from an API response rather than using client-side validation.

This is related to a similar issue when using serverValidation prop. If you have errors you can click the submit button to clear all the errors. Then it will allow you submit the form again

I'm building a dropdown with an empty value as default but a required() validation. The first time I select a valid value, I get the error message.
So I added a Yup test custom validator to log what happens. When a dropdown changes, the validation is called twice: first with the new value then with the initial value.
This is the reverse order. When using a Input field, we are called twice too but with the old value first.

Here is a very simple example:

import {Icon} from 'semantic-ui-react'
import {Button, Dropdown, Form} from 'formik-semantic-ui'
import * as Yup from 'yup'

export default function Test2() {
    const validationSchema = Yup.object().shape({
        gender: Yup.string().required().test((value, context) => {
            console.log(value, context)
            return true
        })
    })

    return <Form validationSchema={validationSchema} initialValues={{gender: ""}}>
        <Dropdown
            label="Gender"
            name="gender"
            options={[
                {text: "", value: ""},
                {text: 'Female', value: 'F'},
                {text: 'Male', value: 'M'},
            ]}
        />

        <Button.Reset>
            <Icon name='remove'/> {"Reset"}
        </Button.Reset>
        <Button.Submit>
            <Icon name='checkmark'/> {("Submit")}
        </Button.Submit>
    </Form>
}```

It appears that the 'multiple' property for Semantic's Dropdown is not handled via this project's Dropdown wrapper. It is not explicitly passed through and doesn't appear to get handled via safeProps.

When the default/initial value of a property is set to an array and multiple is set to true, React still complains that `value must not be an array when 'multiple' is not set'.

How to achieve loading status when Form is started?

So I wanted to use placeholder for <Dropdown> and I realized that it's not available in formik-semantic-ui. how can this be added to the library? can you help me to contribute?

I cannot find possibility to use dropdown component as multiselect. Can I achieve the same result as in semantic/ui dropdown ?
Thanks in advance.

Hi guys,

I noticed that version 0.9.0 of your lib is available on NPM but the latest version on GitHub seems to be 0.8.2. Is there a good reason why the source for v0.9.0 isn't available?

Also, I created a fork where I added those changes present on NPM into your code and fixed the tests so the framework can be built against semantic-ui-react all the way to the latest version 0.86.0 (https://github.com/danpfe/formik-semantic-ui) but before I continue working I just wanted to get some clarity on the specific versioning-issue.

Thanks!
/D

Using an object that has nested properties:

{
    name: '',
    physicalAddress: {
        addressLine1: '',
        addressLine2: '',
        city: '',
        state: '',
        zip: '',
    }
}

And an component like:

<Input label="Address 1" name="physicalAddress.addressLine1" />

My errors won't show up for any physicalAddress item. I believe this is because of the way you're trying to access the errors in the helper.js on line 7 - form.errors[name].

These may be helpful:
jaredpalmer/formik#413
http://blog.nicohaemhouts.com/2015/08/03/accessing-nested-javascript-objects-with-string-key/

The issue I'm having right now is that I'm unable to dynamically add/remove form fields dependent on form values.

Sample:

{values.name === 'John' && ( <Form.Group widths="equal"> <TextArea label="sample" name="sampleField" /> </Form.Group> )}

How do I go about this?

I was trying to calculate value in Input B based on Input A, times other value, but I couldn't find solution better than extending onChange callback parameters list.

My solution was to return form instance in onChange callback:
onChange={(e, {name, value}) => { setFieldValue(form, name, value, false); Promise .resolve() .then(() => { onChange && onChange(e, {name, value, form}); }); }}

and then use form.setFieldValue inside my own onChange callback.
If it is the best solution, I could make a PR.

Thanks in advance, great idea with making this repository,

Hello,

I believe that radio buttons are supported for this library, shown in Github pages:
https://turner-industries.github.io/formik-semantic-ui/

However, I cannot find any example code for implementing this. Radio buttons are missing from the codepen example:
https://codesandbox.io/s/ywjoykw95x

I cannot for the life of me figure out how these should work. And example would be amazing!

Thanks!

• Skyler

So now for every error in validation of filed we get something like:

<span class="sui-error-message">Field is empety.</span>

how can add some custom calsses to this? is it possible?