Upgrade select2 to stable version 4.0.4 and fix compatibility issues in Civi
Currently, Civi is using select2 3.5 which we need to upgrade to latest stable 4.0.4 (https://github.com/select2/select2/releases) and also resolve compatibility issues with CiviCRM.
Major issues:
-
Auto appending values doesn't work anymore Error: Uncaught TypeError: Cannot read property 'prop' of undefined LOC - https://github.com/civicrm/civicrm-core/blob/master/js/crm.searchForm.js#L9 Reference - https://select2.org/upgrading/migrating-from-35#select2-val
-
Placeholder broken Error: Uncaught TypeError: Cannot read property 'id' of undefined As per 3.5 - placeholderOption is used to set the placeholder value for select2 widget As per 4.0.4 - placeholder option can now accept placeholder value both in string and object Reference - https://select2.org/upgrading/migrating-from-35#more-flexible-placeholders
-
EntityRef select2 fields are broken Error: Uncaught Error: No select2/compat/initSelection As per 4.0.4 - Removed the requirement of 'initSelection' Reference - https://select2.org/upgrading/migrating-from-35#removed-the-requirement-of-initselection
-
Navigation menu style is not applied Error: Uncaught TypeError: Cannot read property 'prop' of undefined As per 4.0.4 - $("select").val("1").trigger("change"); // instead of $("select").select2("val", "1"); Reference - https://select2.org/upgrading/migrating-from-35#select2-val
-
Broken entityRef field There are multiple issues with an entityRef field which are listed below:
-
Placeholder doesn't show
-
Unable to populate data via REST API link
-
Create contact dialog box doesn't render below the search field
-
Escape text doesn't show up
-
Action-menu select2 doesn't work on selecting record(s) in a search list It throws an error
Uncaught TypeError: Cannot read property 'apply' of undefined
after Search and also action-menu field doesn't behave on selecting a record. -
The native crm CSS styling doesn't apply on select2/4.0+ widget
Minor issues
- Multi select2 widget doesn't show downarrow placeholder icon
- select2 css style aren't applied after upgrade