Skip to content
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

FormSpy errors are different during every render, even if nothing changes #134

Open
ThiefMaster opened this issue May 13, 2020 · 1 comment

Comments

@ThiefMaster
Copy link

Take this example: https://codesandbox.io/s/react-final-form-field-arrays-p7ntw?file=/index.js

  • Add a row and leave it empty (to have failing validation in the array element).
  • Type something in the company field outside the array
  • onChange of the FormSpy that is only subscribed to errors fires on every keypress in that field as long as the array contains any errors

Combined with a setState in the onChange callback this can easily result in a react update loop freezing the app.

Expected behavior: onChange only triggering when there's an actual change.

giusedb pushed a commit to UNOG-Indico/indico-core that referenced this issue Jul 13, 2020
DirkHoffmann added a commit to DirkHoffmann/indico that referenced this issue Jul 20, 2020
* Add category_filter_extra template block (indico#4428)

* Really fix label migration from 2.2

* Fix wording in protection message

* Bump jquery from 3.4.1 to 3.5.0

Bumps [jquery](https://github.com/jquery/jquery) from 3.4.1 to 3.5.0.
- [Release notes](https://github.com/jquery/jquery/releases)
- [Commits](jquery/jquery@3.4.1...3.5.0)

Signed-off-by: dependabot[bot] <support@github.com>

* Remove legacy CfP timeline code

It's all in react now!

* New revision API: Do not allow call without paper

Submitting papers is still done through another RH, so the API one
does not need to handle it (and would have failed when attempted to do
it anyway)

* Fix item sorting in badge designer

Convert LazyStrings to unicode to allow sort

* Make PyIntEnum freeze enums in Alembic revisions

* Improve adding top-level code to alembic revisions

* Add mdx_latex unit tests from indico#1914

* Allow note download in public events without login

* Move occurrences widget to react

* Replace time field in regform

* Add missing serverside duration validation

* Add user profile picture

* Designer: Add event logo placeholder (indico#4445)

* Designer: Fix eslint errors

* Designer: Validate height in json schema

* Designer: Hide height for non-image elements

* Add link to forum on issue type chooser

* Set default labels for bug/feature issues

* Weekly overview: fix width of table

* Display accepted editables on contribution page

* Render editable types in correct order

* Hide empty file types

If an editable does not have any files in any publishable file type,
this will still show an empty "Proceedings" header but we should
probably just prevent accepting a revision in such a state.

* Add UI for List of editables

* Fix behavior of adding files in call for papers

* Fix issues found by latest flake8/pycodestyle

* Use react-overridable for Overridable

* Get rid of RouteAwareOverridable

It doesn't seem to be needed anymore... Menu items work fine without it.

* Import Overridable code directly from library

* Add editing manager permission

* Use proper editing permission checks

* Restrict paper/editable submission to submitters

* Do not allow managers to submit papers

The frontend does not allow this anyway, so if we ever decide to allow
this it would be better to do it from the paper list, using a separate
RH than the one used for the regular submission.

* Refactor room edit modal

Update the room edit modal to a tabbed layout. Also refactor the form
into multiple sub-components from a single object.

* Enhance submit error handling

Create an error per tab logic that will highlight the corresponding
section.

Move the components part of the edit modal into an edit folder.

* Enhance validation error handling

Form will now handle validation at field level.

Also, input names were changed to snake case.

* Update the component to expect null values

Also adds missing validation to location and removes default
null fields.

* Fixed a bug causing the rooms to never have a photo

Also removed the withKeyAttribute method and minor refactored
validators.

* Refactored the room edit form components

Replace the hideErrorPopup prop by the native semantic-ui trigger,
that shows or disables depending on the focus/hover state.

Create a field dependent validation for latitude and longitude.

* Display the room details and edit modal individually

Also, move the coordinates validation to the form level.

* Hide the custom attributes if none were defined globally

* Move the RoomEditModal to an edit sub-directory

Also apply minor refactorings in the same component.

* Remove require flag from optional fields

* Improve error message

also reorder some imports

* Show tab error indicator for all validation errors

Even if they aren't submit errors. Also don't show the indicator for the
currently-active tab.

* Add missing min/max attrs to number fields

* Move booking adv time and duration to the options

* Restrict Dropzone mimetypes to images and enable dragging

* Update the prop types

Also adds missing validation and moves the form rendering outside of a
function wrapper.

* Fix endless render loop when adding new attribute

Caused by final-form/react-final-form-arrays#134

* Only use travis for old branches

master uses GH actions

* Add stylelint

* Get rid of sass-lint & use stylelint in pre-commit

* Run stylelint in CI

* Autofix stylelint issues (and use 2-space indent)

* Autofix stylelint issues (and use 2-space indent) in CSS

* Manually fix remaining stylelint issues

* Manually fix remaining stylelint issues in CSS

* Autofix more issues

* Fix even more issues

* Fix CentOS setup docs

* Update most python deps

Skipping the trickier ones

* Fix SQLAlchemy warning

* Update werkzeug

Can't use 1.0 since our ancient version of flask-oauthlib isn't
compatible with it

* Update markdown

* Add transifex-client to dev dependencies

* Use correct value for disabled transform

* Update JS dependencies

* Update package-lock.json

* Update JS dependencies (outside semver range)

* Update package-lock.json

* Include editing data in event export

* Display tags in editable timeline

* Add secure_client_filename util

* Preserve non-ASCII chars in file names

On disk filenames are still cleaned up and converted to ASCII, but the
filename used for display purposes and the content-disposition header
sent to clients now uses the original name.

* Editing: add token-based service auth

* Make parameter names consistent

* Add extra attributes in serialized schemas

* Allow services to configure editing workflow

* send_file: set no_cache to False on conditional

* Rename get_one(...) -> get_or_404(...)

* Add functionality to opening/closing of submissions

* Add functionality to opening/closing of editing

* Implement backend actions for multiple editables

closes indico#4418

* Implement modifiedSinceLastSubmit in room edit modal form

* Opt out from scarf analytics

* Force colored i18n errors

* Get rid of surrounding whitespace in Translate

* Show actual editor name in timeline

* Update react-jsx-i18n

* Add 'unassign/assign myself' to editable timeline

Split TimelineHeader for 'Call for Papers' and 'Editables' since
they started diverging too much.

* Fix editor permission check in editing timeline

* Require editor assignment for editor actions

* Remove editable type permissions from Protection settings

* Fix clicking headers in unavailable rooms modal

Also fixes a proptypes warning

* Remove circular dependencies from the room booking module

Also enables eslint rule import/no-cycle

* Reorganize imports

Mainly, move queryString.js imports out of the index.js.

* Move openModal to the global actions

* Create a test for RoomEditModal

Also switches the actions/selectors import order in
rb/common/rooms/index.js causing the tests to fail.

redux-mock-store is added as a dependency.

* Replace manual mocks with mocked axios calls

Fixes a warning with react state updates happening outside of the act
wrapper.

* Simplify comparison using Sets

Avoids using obscure filter to remove duplicates.

* Add watchman-based autoreloader

* Use cleaner way to avoid nested reloader

Like this you can change branches after running with watchman which
makes testing it easier without it being merged into master.

* Use nicer message when changes are in current dir

* Don't trigger reload inside node_modules

Some node packages contain .py files, and during a `npm ci` they are
recreated. No need to reload then...

* Fix self-assign permission check

- Do not allow assigning if the editable is already assigned unless you
  also have the permission to unassign.
- Check that self-assignment is actually allowed.

* Only show submit-new-revision UI to authorized users

* Add editing notifications

* Improve wording when linking to the editable

* Fix/improve comment notification logic

* Move format_event_date macro to util template

This allows calling the macro from get_template_module without having to
pass the entire context for base.html.

* Avoid query spam when loading editable timeline

* Prevent accepting editable with no publishable files

* Avoid double tooltip in permissionswidget

`[data-tooltip]` triggers a css-only SUI tooltip

* Add backend for list of editables

* Link to editable list in editable type dashboard

* Add a new enum + column prop for editable state

* Show revision number/count in editable list

* Fix collapsing track content in management

* Use correct endpoint names

* Only allow selecting rows with editables

And store selection using editable ids instead of contribution ids

* Implement "Download all files"

* Add get_editors util

Also add a get_users method to all principal objects.

* Use more useful log message for editor assignments

* Use better back button url in editable list

Going back to the editable type dashboard makes more sense than going
back to the main editing dashboard

* Implement assignment actions in editable list

* Use correct axios triggers

Doesn't really matter here since neither of the props will change...

* Various EditableList improvements

* Rename .scrolling class

SUI also uses it

* Make editor assignment dropdown scrollable

* Show non-user-selectable permissions in Protection

* Sort entries & fix pluralization

* Add Contact dialog in Editing

* Add before-registration-summary template hook

* Fix category stats in an empty DB

* Remove obsolete default_group_provider

It was mainly needed in the past for legacy-roombooking, but since
that's long gone there is no real need for it anymore.

The legacy group search API (which is still used) now properly includes
the group name without having to fall back to the default.

The updated two-year-old alembic revision is untested; it will require
an x-arg when doing an `indico db upgrade` straight from 2.1 to 2.3 in
case there were any rooms (not very common) with booking/manager groups
set (even less common).

* Fix error in permission fields for non-Event objs

* Fix permissions label for categories

* Editable list: implement search functionality

* Use set when checking for checked rows

* Use more verbose placeholder in search field

* Prevent groups from having editor permissions

* Exclude build dir from watchman

* Add extra-registration-actions template hook

* Allow resetting registration moderation status

* Fix broken UI after undoing some judgments

* Publish revision during update+accept judgment

Also fix undoing such a judgment.

* Create a closer link between peer reviewing and editing

* Rename existing files prop in the File Manager

Uploadable files refers to files that already exist and can be
uploaded, as opposed to existing that has an abstract location
meaning.

Also update the prop types to be compatible with uploadable file
handles.

* Create an EDITABLE_REQUIRED flag in RHContributionEditableBase

Also apply minor name refactorings

* Restrict the paper steps render conditions

Disable the editing step if editing is not enabled.
Restrict the steps view to authors only.

* Prevent existing files from being re-uploaded

Also add a placeholder to paper steps.

* Update the File Manager to delete uploadable files

Also simplify the usage of uploadFiles function

* Add a paper property for the state of the editing module

Also merge the PaperSteps loading prop with parent's state.
Create the text prop for EditableSubmissionButton.

* Update paper flag to check if the event has editing enabled

Update the paper judgment revert action to an undo icon.

* Add event-management-after-title template hook

* Fix banner margins

* Add registration form to event acls

* Add category_content template block

* Fix typo in email validation confirmation message

* Allow additional request params in event list

* Add meta column to events.logs table

Also, allow filtering by `meta` in RHEventLogsJSON.

* Save registration ID in related event log entries

This allows querying by specific registration in event logs.

* Allow filtering event log by related entries

* Move more metadata filter logic into actions

* Avoid passing JSON in the query string

* Prevent editable operations on deleted contribs

* Don't automatically open browser's print dialog

closes indico#4513

* Add `extension` column property to StoredFileMixin

* Add self-assignment modal for editing

Co-authored-by: Adrian Moennich <adrian.moennich@cern.ch>

* Show dimmer/loader in result area

* Disable buttons while loading

* Add "Add myself" option to person link widget (indico#4411)

Co-authored-by: Adrian Moennich <adrian.moennich@cern.ch>

* Do not escape temp event logo filenames in latex

Otherwise it breaks when the filename contains an underscore

* Render all published files correctly

* Update EditingView look

Use real editable type instead of hardcoding "paper"

* Wrap only Timeline in redux

* Add router and editable list in hybrid view

* Fix permission checks in editing

- do not try loading editors in hybrid-view editable list
- hide bulk operations in that view
- give editors access to the editable list

* Add link to manage subcontributions (indico#4520)

* Change weird spelling of subcontribution
* Add link to manage subcontributions
* Reload page after closing subcontribution dialog (if something changed)
* Show subcontrib title in dialog subtitle
* Use consistent capitalization in contrib edit dropdown

* Fix duplicate bundle include

* Add before-registration-actions template hook

* Room booking: show 'Site' in room details

* Fix update after closing room edit modal

* Restrict system tag management

Also fix creating new tags

* Add some spacing between tag actions

* Editing: add required file indicator

* Show editing file template under extensions

* Fix tooltip for file names in Editing

* Fix TooltipIfTruncated with child elements

In this case the event target was not the immediate child and thus
detecting the overflow did not work properly.

Also used the opportunity to convert it to a function component.

* Enforce qtips on TooltipIfTruncated

Inside `.ui` the qtip logic is usually disabled

* Fix profile picture upload and delete

This allows administrators to upload and delete the profile picture for
other Indico users.

* Add link in Editable List for "Paper Bingo"

* Connect revision endpoints to the service mixin

* Fix a bug causing a replaced revision to throw

Creating a revision right after the revision replacement causes an
exception while getting the previous editor.

This commit refactors the processRevisions method and creates a test
to ensure the behaviour remains the same.

* Delete the editable if the service is not available

* Simplify the TokenMixin access check

* Remove unclaiming method from the file model

* Fix a bug causing the editable to remain inconsistent

* Update the editable service endpoint

* Do not let editors select system tags

They are rejected when submitting.
Also fixed the form resetting when the parent component re-rendered.

* Show comment in replaced revision

* Allow setting tags when replacing revision

* Properly sanitize timezone changes

* Only allow microservice to replace revisions

We don't have a UI for it at the moment, and it's not clear whether
users should have a way to replace their own revision or not.

* Mention Editing module in changelog

* Improvements in VC module

* Flash messages from timetable updates

* Add plusdelta filter to Jinja

* Fix wording of RB update e-mails

* Remove stray TODO

* Remove sanitization of VC room names

Passed on to plugins

* Specify VC system in form data

* Trigger custom even when an ajaxDialog loads

* Add decodeprincipal filter to Jinja

* Remove text input CSS height constraint

* Allow passing url args for conf menu links

* Fix off-by-one when adding new menu items

Duplicate position is harmless, but still a bit ugly

* Add editing entries to conference menu

* Add CfA setting to control author editing rights

* Abstract: contrib submission rights can be configured

* Build changes from getattr instead of passed value

This makes populate_from_dict correctly build the changes for properties
where getattr returns something different than what setattr sets.

* Fix typo

* Disable noisy no-descending-specificity rule

It complains about something as simple as this:

```scss
.foo .bar {
  ...
  &:hover { ... }
}

.foobar .bar {
  ...
}
```

* Improve IndicoDateField facilities

Added:
- DateRange validator
- LinkedDate validator

Improved:
- IndicoDateField now renders with the React date picker

* Fix excessive spacing for date picker clear button

* Pass input_args to date/datetime fields

Otherwise HiddenUnless doesn't work properly

* Use better default for allow_clear

* Use smarter allow_clear in IndicoDateTimeField

* Fix required/disabled in date/time fields

* Fix DateTimePicker if earliest/latest time is set

When clicking the time picker with an empty date field it failed because
`date` was null.

* Use DateTimePicker when adding/editing reminders

This removes the need for all this custom logic to handle timezones
because IndicoDateTimeField already does it.

* Remove obsolete jquery daterange widget

* Remove unnecessary fixed datepicker width

* Don't make radio/checkbox labels larger than needed

see review comment on indico#4540

* Bump lodash from 4.17.15 to 4.17.19

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.15...4.17.19)

Signed-off-by: dependabot[bot] <support@github.com>

* Hide microservice UI outside debug mode for now

* Include metadata for more event log entries

* Fix duration display in contrib list after editing

* Fix blocking users

The UI was only visible if the target user was an admin...

* Add support for registration forms in the PrincipalList

* Create RHPrivilegedEventBase

Also move registration form listing endpoint to the respective
module.

* Create a test for RHPrivilegedEventBase

Also fix a bug causing the RegistrationSchema to fail initializing
mappers early when imported globally.

* Rename RegistrationFormSchema

Also create AddPrincipalDropdown to collapse the same dropdown
template.

* Use less confusing registrants dropdown text

Many events have a registration form called "Participants", and in that
case listing just the title was a bit confusing.

Co-authored-by: marengeti <5030376+marengeti@users.noreply.github.com>
Co-authored-by: Adrian Moennich <adrian.moennich@cern.ch>
Co-authored-by: Parth Shandilya <parth.shandilya@cern.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Giorgio Pieretti <giorgio.pieretti@openprojects.it>
Co-authored-by: Alejandro Avilés <alejandro.aviles@un.org>
Co-authored-by: Lea Tschiersch <lea.tschiersch@cern.ch>
Co-authored-by: Alejandro Avilés <omegak@gmail.com>
Co-authored-by: Panagiota Poulopoulou <panagiota.poulopoulou@cern.ch>
Co-authored-by: Parth Shandilya <parth1989shandilya@gmail.com>
Co-authored-by: Pedro Lourenço <pedro.lourenco@cern.ch>
Co-authored-by: Indico Team <indico-team@cern.ch>
Co-authored-by: Pedro Ferreira <pedro.ferreira@cern.ch>
Co-authored-by: Michal Kolodziejski <michal.kolodziejski@cern.ch>
Co-authored-by: Natalia Juszka <juszka.natalia@gmail.com>
Co-authored-by: Juan Grigera <juan@grigera.com.ar>
@tjb042
Copy link

tjb042 commented Apr 19, 2021

I realize this is rather old at this point but thought it may be worth an attempt to answer for those coming across this.

By default anytime a field changes every field will be validated at the same time. This seems to be true in this example because changing the value of the company field is retriggering validation on the customers field which causes the errors state to be updated (thus triggered the FormSpy subscriber).

You can change this behavior by providing a validateFields prop on a Field; see: validateFields. Providing an empty array to the validateFields prop means that no other fields will be be re-validated when this one changes.

Applying that to this example, if we set validateFields={[]} on the company field then validation won't be re-triggered on the customers field for every change to the company state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants