There are several instances where this package is using outdated ways of setting up inputs.

One example is wrapped elements in <ul>s and <li>s rather than the newer <div> that GF uses.

This ticket covers looking over the basic GF HTML, and updating this package to be the same.

Since we usually work on projects that support multiple languages, I would like to create a plan for implementing internationalization. It would be ideal to store all strings in a strings.js file and devise a strategy for translating them. Perhaps we can achieve this by passing strings as prop to the form and adjusting the code accordingly. @robmarshall maybe you have a better idea?

I would like to work on it as soon as possible as it is quite importnat feature for us

Project still imports React across many of its components. Would be good to remove this at some point.

Be sure to test, as I tried this and ended up getting errors when used on the example repo: https://github.com/robmarshall/next-gravity-forms-example

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's "for" attribute references the correct "id" of a form field.

This is for the hidden field and checkbox.

I am submitting a form from frontend (next js) but I noticed all fields are not submitting.
I checked the graphQL request that is generated in the network tab upon submitting, it doesn't show all the fields
The fields that were not available there have some important things to consider.
They are "hidden"
Their value is assigned via javascript
But before submission, i checked the value using chrome dev tools and the field had value
But those fields are important and this package is not sending them with form data due to some reason. Please help

#6 - Highlighted by @Gytjarek

It seems like there's an issue with themaxLength functionality. It works fine when a GF field has a maximum length set in a form. However, when it's not defined, it always returns an error. As a fix, a conditional check should be added:

<input maxLength: maxLength > 0 && { value: maxLength, message: ...messageHere />

Currently yarn build has to be run each time when trying to test on an example site.

Add hot reloading to make development on this package an easy process.

Currently no instructions on how to dev on this package. Add helpful instructions from clone to final workflow.

How should we handle support for select2? We could install the react-select library, but styling it isn't as straightforward. Do you have any better ideas @robmarshall ?

We have begun adding a number of third party packages.

These should be excluded from the users bundle when not required for a particular form.

Unsure how to handle exactly, but as this whole package is clientside, maybe the usual deferred import flow?

Stay away from next dynamic, as that forces this to be a 100% next package. Currently it is fairly React friendly no matter where it is used.

Please make sure to render the custom validation message added in the Appearance tab for the field.

When a range is specified, for example, between 10 and 20, any number outside this range should not be accepted. Instead, it should trigger a validation error when user tries to submit a form.

Currently, user can enter any number, and the form accepts it without showing a validation error.

The user is able to submit a form without ticking "I am not a robot" on CAPTCHA. This occurs without any error message or indication that the CAPTCHA is a required field.

Thanks for sharing great next.js + gravityform module.
But I found some issues there.
One is that the register's maxlength is not actually working.

In Textarea and Input:

{...register(name, {
      required: isRequired && strings.errors.required,
      **maxlength**: {
        value: maxLength > 0 && maxLength,
        message:
          maxLength > 0 &&
          `${strings.errors.maxChar.front}  ${maxLength} ${strings.errors.maxChar.back}`,
      },
      pattern: {
        value: regex ? new RegExp(regex) : null,
        message: regex && strings.errors.pattern,
      },
    })}

maxlength should be maxLength.

@robmarshall Hi! I'm going to work on the file upload functionality and am thinking about the best approach for implementing it. So far, I've identified the following issues:

1. This plugin should be installed to enable file uploading: https://github.com/dre1080/wp-graphql-upload. If it's not installed, and we still render a field with its functionality, users might encounter unclear errors. How can we ensure it is required to be installed?
2. Currently, Gravity Forms doesn't immediately throw an error when a user tries to upload a file with an unsupported type. We can easily improve this in our package by throwing the error right away. Do you think it's worth doing, or should we replicate Gravity Forms' functionality as closely as possible?
3. It is possible to enable a multi-file upload option, which activates a dropzone field. I notice that files get uploaded directly to the server on drop. Do you think we should replicate this behavior, or could we submit all files on form submission?