Commit b5ee7cf4 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Georg Ringer
Browse files

[BUGFIX] Fix dispatching of `formengine.dp.change` event for date fields

With the introduction of a new datetime picker, the listener for the
event `formengine.dp.change` was not attached properly which broke the
validation of updated datetime field. The listener is now attached to
the datetimer field properly.

To avoid introducing jQuery again, the method
`FormEngineValidation.markFieldAsChanged` became aware of non-jQuery
objects.

Resolves: #92913
Related: #91606
Releases: master
Change-Id: I3727f362a7d685fdea9bcdf0f1d3b37eca12d424
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66966


Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
parent e566ae87
......@@ -21,23 +21,23 @@ class InputDateTimeElement {
constructor(elementId: string) {
DocumentService.ready().then((): void => {
this.element = document.getElementById(elementId) as HTMLInputElement;
this.registerEventHandler();
this.registerEventHandler(this.element);
require(['../../DateTimePicker'], (DateTimePicker: any): void => {
DateTimePicker.initialize(this.element)
});
});
}
private registerEventHandler(): void {
private registerEventHandler(element: HTMLInputElement): void {
new RegularEvent('formengine.dp.change', (e: CustomEvent): void => {
FormEngine.Validation.validate();
FormEngine.Validation.markFieldAsChanged(e.detail.element);
FormEngine.Validation.markFieldAsChanged(e.target as HTMLInputElement);
document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
btn.classList.remove('disabled');
btn.disabled = false;
});
}).bindTo(document);
}).bindTo(element);
}
}
......
......@@ -31,7 +31,7 @@ declare namespace TYPO3 {
export namespace Backend {
export class FormEngineValidation {
public readonly errorClass: string;
public markFieldAsChanged($field: JQuery): void;
public markFieldAsChanged(field: HTMLInputElement|HTMLTextAreaElement|JQuery): void;
public initializeInputFields(): void;
public validate(): void;
}
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports","TYPO3/CMS/Core/DocumentService","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,i,r){"use strict";return class{constructor(t){this.element=null,n.ready().then(()=>{this.element=document.getElementById(t),this.registerEventHandler(),e(["../../DateTimePicker"],e=>{e.initialize(this.element)})})}registerEventHandler(){new r("formengine.dp.change",e=>{i.Validation.validate(),i.Validation.markFieldAsChanged(e.detail.element),document.querySelectorAll(".module-docheader-bar .btn").forEach(e=>{e.classList.remove("disabled"),e.disabled=!1})}).bindTo(document)}}}));
\ No newline at end of file
define(["require","exports","TYPO3/CMS/Core/DocumentService","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,i,r){"use strict";return class{constructor(t){this.element=null,n.ready().then(()=>{this.element=document.getElementById(t),this.registerEventHandler(this.element),e(["../../DateTimePicker"],e=>{e.initialize(this.element)})})}registerEventHandler(e){new r("formengine.dp.change",e=>{i.Validation.validate(),i.Validation.markFieldAsChanged(e.target),document.querySelectorAll(".module-docheader-bar .btn").forEach(e=>{e.classList.remove("disabled"),e.disabled=!1})}).bindTo(e)}}}));
\ No newline at end of file
......@@ -544,11 +544,14 @@ define([
/**
* Helper function to mark a field as changed.
*
* @param {Object} $field
* @param {HTMLInputElement|HTMLTextAreaElement|jQuery} field
*/
FormEngineValidation.markFieldAsChanged = function($field) {
var $paletteField = $field.closest('.t3js-formengine-palette-field');
$paletteField.addClass('has-change');
FormEngineValidation.markFieldAsChanged = function(field) {
if (field instanceof $) {
field = field.get(0);
}
const paletteField = field.closest('.t3js-formengine-palette-field');
paletteField.classList.add('has-change');
};
/**
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment