ChooserWidget: Trigger manually change event when input.value is set

- Ensure that the change events bubble as this is the default browser behaviour
- By default, changes to hidden values will not fire a `change` event, nor those that are a result of programatic changes to `value, so instead this needs to be added manually so that other code can listen to changes to chosen fields with DOM event listeners.
- https://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field/8965804#8965804
- Closes #10187

CHANGELOG.txt

@@ -17,6 +17,7 @@ Changelog
  * Keep applied filters when downloading form submissions (Suyash Srivastava)
  * Messages added dynamically via JavaScript now have an icon to be consistent with those supplied in the page's HTML (Aman Pandey)
  * Switch lock/unlock side panel toggle to a switch, with more appropriate confirmation message status (Sage Abdullah)
+ * Ensure that changed or cleared selection from choosers will dispatch a DOM `change` event (George Sakkis)
  * Fix: Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
  * Fix: Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
  * Fix: Ensure `Site.get_site_root_paths` works on cache backends that do not preserve Python objects (Jaap Roes)

CONTRIBUTORS.rst

@@ -700,6 +700,7 @@ Contributors
 * Sam
 * Deepam Priyadarshi
 * Mng
+* George Sakkis
 
 Translators
 ===========

client/src/components/ChooserWidget/index.js

@@ -85,11 +85,13 @@ export class Chooser {
 
   renderEmptyState() {
     this.input.setAttribute('value', '');
+    this.input.dispatchEvent(new Event('change', { bubbles: true }));
     this.chooserElement.classList.add('blank');
   }
 
   renderState(newState) {
     this.input.setAttribute('value', newState.id);
+    this.input.dispatchEvent(new Event('change', { bubbles: true }));
     if (this.titleElement && this.titleStateKey) {
       this.titleElement.textContent = newState[this.titleStateKey];
     }

docs/releases/5.0.md

@@ -29,6 +29,7 @@ Support for adding custom validation logic to StreamField blocks has been formal
  * Keep applied filters when downloading form submissions (Suyash Srivastava)
  * Messages added dynamically via JavaScript now have an icon to be consistent with those supplied in the page's HTML (Aman Pandey)
  * Switch lock/unlock side panel toggle to a switch, with more appropriate confirmation message status (Sage Abdullah)
+ * Ensure that changed or cleared selection from choosers will dispatch a DOM `change` event (George Sakkis)
 
 ### Bug fixes