(regression) FormBuilder forms with yes/no and autocomplete fail in Firefox
Overview
In Civi 5.69 (and master) forms that meet certain criteria fail to submit in Firefox. I believe there are scenarios other than the one I describe below, but this represents a relatively simple replicable case.
I did a git bisect
and tracked it down to https://github.com/civicrm/civicrm-core/pull/28452 (no Gitlab bot that's not a pull request for this issue).
Reproduction steps
I've attached a FormBuilder form that's a relatively simple replication case. This requires a field of type "Yes/No" called yesno
in a custom group with name contact_fields2
.
Select "yes" or "no" on the custom field, press "Submit".
Current behaviour
If you submit this form in Firefox, you see the error "Sorry an error occurred and your information was not saved.", but then the page reloads, though the URL changes: e.g.:
# original
http://dmaster.localhost/civicrm/org-member-renewal
# post-submit
http://dmaster.localhost/civicrm/org-member-renewal?contact-fields-2-yesno-1=0
In Chrome, the page submits successfully.
There's also a ton of JS console errors.
On my civicrm-buildkit site, they looked like this:
Error: [$rootScope:infdig] http://errors.angularjs.org/1.8.2/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%7D%5D%5D
Angular 41
jQuery 2
<anonymous> Angular
jQuery 7
<anonymous> Common.js:1659
jQuery 8
angular.js:15697:15
On my 5.69.2 non-buildkit site, it looked like this:
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: fn","newVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":{}},"oldVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":"..."}}],[{"msg":"fn: fn","newVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":"..."},"oldVal":"..."}],[{"msg":"fn: fn","newVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":"..."},"oldVal":"..."}],[{"msg":"fn: fn","newVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":"..."},"oldVal":"..."}],[{"msg":"fn: fn","newVal":{"formName":"afform:afformOrganizationMembershipRenewal","fieldName":"Organization2:id","values":"..."},"oldVal":"..."}]]
https://errors.angularjs.org/1.8.2/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%7B%7D%7D%2C%22oldVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%22...%22%7D%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%22...%22%7D%2C%22oldVal%22%3A%22...%22%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%22...%22%7D%2C%22oldVal%22%3A%22...%22%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%22...%22%7D%2C%22oldVal%22%3A%22...%22%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20fn%22%2C%22newVal%22%3A%7B%22formName%22%3A%22afform%3AafformOrganizationMembershipRenewal%22%2C%22fieldName%22%3A%22Organization2%3Aid%22%2C%22values%22%3A%22...%22%7D%2C%22oldVal%22%3A%22...%22%7D%5D%5D
Angular 8
$onChanges http://reamp.local/wp-content/plugins/civicrm/civicrm/ang/crmUi.js?r=GUtKAen_US:789
Angular 34
jQuery 2
<anonymous> Angular
jQuery 7
<anonymous> http://reamp.local/wp-content/plugins/civicrm/civicrm/js/Common.js?r=GUtKAen_US:1659
jQuery 8
angular.js:138:12
Expected behaviour
Form should always submit successfully.
Environment information
- Browser: Firefox 120.0.1
- CiviCRM: master
- PHP: 8.1
- CMS: Drupal 7
- Database: Replicated w/ MariaDB 10.6 and 10.11
- Web Server: Apache 2.4