Commit 3334a963 authored by Benjamin Franzke's avatar Benjamin Franzke
Browse files

[BUGFIX] Avoid autofocus on preselected useOrOverridePlaceholder fields

With #90879 useOrOverridePlaceholder fields have been adapted
to autofocus the related field when the related checkbox
(e.g in sys_file_references) are triggered in
FormEngine.toggleCheckboxField.

This has the side effect that input fields whose checkbox
is preselected are autofocused on initial page load, when
FormEngine.toggleCheckboxField() is called from
FormEngine.initializeNullWithPlaceholderCheckboxes.
This caused the browser to scroll to these fields.

The autofocus is now changed to not be triggered on
initial pageload, only when FormEngine.toggleCheckboxField()
is used due to user input.

This also had the effect that acceptance tests failed randomly as
automated tab-clicks didn't work (for example in #93629), when the
formengine iframe was scrolled all the way to the last
useOrOverridePlaceholder field, rendering the tab-selection invisible.

Releases: main, 11.5
Resolves: #96947
Related: #90879
Related: #93629
Change-Id: Ie880595079e60421556994b14af0b94bba67b73c
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/73578

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Stefan Bürk's avatarStefan Bürk <stefan@buerk.tech>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Stefan Bürk's avatarStefan Bürk <stefan@buerk.tech>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Nikita Hovratov's avatarNikita Hovratov <nikita.h@live.de>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
parent 4f8edc26
......@@ -589,21 +589,22 @@ export default (function() {
*/
FormEngine.initializeNullWithPlaceholderCheckboxes = function(): void {
$('.t3js-form-field-eval-null-placeholder-checkbox').each((index: number, el: HTMLElement) => {
FormEngine.toggleCheckboxField($(el).find('input[type="checkbox"]'));
FormEngine.toggleCheckboxField($(el).find('input[type="checkbox"]'), false);
});
};
/**
* Set initial state of both div's (one containing actual field, other containing placeholder field)
* depending on whether checkbox is checked or not
* @param $checkbox
*/
FormEngine.toggleCheckboxField = function($checkbox: JQuery): void {
FormEngine.toggleCheckboxField = function($checkbox: JQuery, triggerFocusWhenChecked: boolean = true): void {
const $item = $checkbox.closest('.t3js-formengine-field-item');
if ($checkbox.prop('checked')) {
$item.find('.t3js-formengine-placeholder-placeholder').hide();
$item.find('.t3js-formengine-placeholder-formfield').show();
$item.find('.t3js-formengine-placeholder-formfield').find(':input').trigger('focus');
if (triggerFocusWhenChecked) {
$item.find('.t3js-formengine-placeholder-formfield').find(':input').trigger('focus');
}
} else {
$item.find('.t3js-formengine-placeholder-placeholder').show();
$item.find('.t3js-formengine-placeholder-formfield').hide();
......
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