typo3-typescript-sources 14.3.6 → 14.3.8

package/backend/tests/notification-test.ts

@@ -106,6 +106,124 @@ describe('@typo3/backend/notification:', () => {
     }
   });
 
+  describe('auto dismissal', () => {
+    async function showNotification(): Promise<{ element: LitElement, isCleared: () => boolean }> {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      // Notifications appear with a delay, the countdown starts afterwards
+      await clock.tickAsync(200);
+      return { element, isCleared: (): boolean => cleared };
+    }
+
+    it('pauses while the notification is pointed at', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('pauses while the notification has the focus', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('continues with the time that was left', async () => {
+      const { element, isCleared } = await showNotification();
+
+      await clock.tickAsync(600);
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+
+      await clock.tickAsync(300);
+      expect(isCleared()).to.be.false;
+      await clock.tickAsync(200);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer leaves while the focus is still inside', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer rests on the notification before it appeared', async () => {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(cleared).to.be.true;
+    });
+
+    it('is not cleared by the countdown while an action is executing', async () => {
+      let finishAction: () => void;
+      Notification.success('Title', 'Message', 1, [
+        {
+          label: 'Undo',
+          action: new DeferredAction((): Promise<void> => new Promise((resolve): void => {
+            finishAction = resolve;
+          })),
+        },
+      ]);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      await clock.tickAsync(200);
+
+      (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      finishAction();
+      await clock.tickAsync(0);
+      expect(cleared).to.be.true;
+    });
+  });
+
+  it('announces notifications to assistive technology', async () => {
+    Notification.info('Info message', 'Some text', 1);
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    expect(document.querySelector('#alert-container .alert-list').getAttribute('aria-live')).to.equal('polite');
+  });
+
   it('can render action buttons', async () => {
     Notification.info(
       'Info message',
@@ -158,4 +276,62 @@ describe('@typo3/backend/notification:', () => {
     await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
     expect(called).to.be.true;
   });
+
+  it('deferred action is called with its link', async () => {
+    let called = false;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'My deferred action',
+        action: new DeferredAction(async (): Promise<void> => {
+          called = true;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+
+    (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+    await clock.tickAsync(0);
+
+    expect(called).to.be.true;
+  });
+
+  it('executes an action only once while it is executing', async () => {
+    let calls = 0;
+    let finishAction: () => void;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'Deferred action',
+        action: new DeferredAction((): Promise<void> => {
+          calls++;
+          return new Promise((resolve): void => {
+            finishAction = resolve;
+          });
+        }),
+      },
+      {
+        label: 'Other action',
+        action: new ImmediateAction((): void => {
+          calls++;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+    const [first, second] = Array.from(element.querySelectorAll('.alert-actions a')) as HTMLAnchorElement[];
+
+    first.click();
+    await clock.tickAsync(0);
+    // Keyboard activation still reaches a link which ignores the pointer
+    first.click();
+    second.click();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+    expect(first.getAttribute('aria-disabled')).to.equal('true');
+    expect(second.getAttribute('aria-disabled')).to.equal('true');
+
+    finishAction();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+  });
 });

package/backend/tree/page-tree-element.ts

@@ -110,7 +110,9 @@ export class EditablePageTree extends PageTree {
         '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(newData.title) +
         '&data[pages][' + data.node.identifier + '][doktype]=' + encodeURIComponent(newData.doktype);
     } else if (data.command === TreeNodeCommandEnum.EDIT) {
-      params = '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(data.title);
+      // The tree may show nav_title instead of title, so write back to the field that is displayed
+      const nameSourceField = data.node.nameSourceField || 'title';
+      params = '&data[pages][' + data.node.identifier + '][' + nameSourceField + ']=' + encodeURIComponent(data.title);
     } else if (data.command === TreeNodeCommandEnum.DELETE) {
       // @todo currently it's "If uid of deleted record (data.uid) is still selected, randomly select the first node"
       const moduleStateStorage = ModuleStateStorage.current('web');
@@ -245,6 +247,11 @@ export class EditablePageTree extends PageTree {
       command: TreeNodeCommandEnum.MOVE
     };
 
+    if (!this.settings.displayCopyMoveConfirmation) {
+      this.sendChangeCommand(options);
+      return;
+    }
+
     let modalText = '';
     const languageArguments = [node.name, target.name] as const;
     switch(position) {

package/backend/wizard/steps/finisher-step.ts

@@ -33,9 +33,9 @@ export class FinisherStep implements WizardStepInterface {
   readonly autoAdvance = false;
 
   public resetButtonTitle: string = null;
+  public hasError = false;
 
   private finisherInstance: FinisherInterface | null = null;
-  private hasError = false;
   private readonly task: Task<[SubmissionServiceInterface], FinisherResult>;
 
   constructor(private readonly wizard: Wizard, private readonly finisher: SubmissionServiceInterface) {
@@ -55,7 +55,7 @@ export class FinisherStep implements WizardStepInterface {
   public isComplete(): boolean {
     // Finisher step is complete when the task has finished (success or error)
     // This allows the user to close the wizard even when there's an error
-    return this.task.status === TaskStatus.COMPLETE;
+    return this.task.status === TaskStatus.COMPLETE || this.task.status === TaskStatus.ERROR;
   }
 
   public async beforeAdvance(): Promise<void> {

package/backend/wizard/wizard.ts

@@ -332,13 +332,20 @@ export class Wizard extends LitElement {
   private renderNextButtons(): TemplateResult {
     const isComplete = this.currentStep?.isComplete();
     let buttonLabel: string;
+    let buttonIcon: string = 'actions-arrow-end-alt';
     let resetButtonHtml: TemplateResult | typeof nothing = nothing;
 
     if (this.currentStep?.key === 'finisher') {
-      buttonLabel = wizardLabels.get('wizard.buttons.finish');
-
       const finisherStep: FinisherStep = this.currentStep as FinisherStep;
-      if (finisherStep?.resetButtonTitle) {
+      if (finisherStep.hasError) {
+        // On failure the primary action only closes the wizard
+        buttonLabel = wizardLabels.get('wizard.buttons.close');
+        buttonIcon = 'actions-close';
+      } else {
+        buttonLabel = wizardLabels.get('wizard.buttons.finish');
+      }
+
+      if (!finisherStep.hasError && finisherStep?.resetButtonTitle) {
         resetButtonHtml = html`
           <button type="button" class="${classMap({ 'btn': true, 'btn-secondary': true })}"
             @click="${this.handleRestart}"
@@ -361,7 +368,7 @@ export class Wizard extends LitElement {
           @click="${this.handleNext}"
         >
           ${buttonLabel}
-          <typo3-backend-icon identifier="actions-arrow-end-alt" bidi size="small"></typo3-backend-icon>
+          <typo3-backend-icon identifier="${buttonIcon}" bidi size="small"></typo3-backend-icon>
         </button>
       </div>
     `;

package/core/ajax/ajax-request.ts

@@ -117,6 +117,24 @@ class AjaxRequest {
     return new AjaxResponse(response);
   }
 
+  /**
+   * Executes a (by default uncached) PATCH request
+   *
+   * @param {string | FormData | GenericKeyValue} data
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async patch(data: string | FormData | GenericKeyValue, init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      body: typeof data === 'string' || data instanceof FormData ? data : InputTransformer.byHeader(data, init?.headers),
+      cache: 'no-cache',
+      method: 'PATCH',
+    };
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
   /**
    * Executes a regular DELETE request
    *

package/core/tests/ajax/ajax-request-test.ts

@@ -50,7 +50,7 @@ describe('@typo3/core/ajax/ajax-request', (): void => {
     expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: 'POST', body: '' }));
   });
 
-  for (const requestMethod of ['POST', 'PUT', 'DELETE']) {
+  for (const requestMethod of ['POST', 'PUT', 'PATCH', 'DELETE']) {
     describe(`send a ${requestMethod} request`, (): void => {
       function* requestDataProvider(): any {
         yield [

package/core/tests/utility/text-normalizer-test.ts

@@ -0,0 +1,138 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import TextNormalizer from '@typo3/core/utility/text-normalizer.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/utility/text-normalizer', () => {
+  describe('foldCaseAndDiacritics', () => {
+    it('returns an empty string unchanged', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('')).to.equal('');
+    });
+
+    it('lowercases the value', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Cremeschnitte')).to.equal('cremeschnitte');
+    });
+
+    it('removes Latin diacritics', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Crème brûlée')).to.equal('creme brulee');
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.equal('muller');
+    });
+
+    it('removes Greek and Cyrillic diacritics', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('ΆΘΗΝΑ')).to.equal('αθηνα');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ёлка')).to.equal('елка');
+    });
+
+    it('removes every Vietnamese tone mark', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Tiếng Việt')).to.equal('tieng viet');
+    });
+
+    it('folds a value that is already decomposed to the same result', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Crème'.normalize('NFD'))).to.equal(TextNormalizer.foldCaseAndDiacritics('Crème'.normalize('NFC')));
+    });
+
+    // A locale aware mapping folds this to a dotless "ı" on a Turkish browser.
+    it('folds the capital i to a plain lowercase i', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Import')).to.equal('import');
+      expect(TextNormalizer.foldCaseAndDiacritics('İstanbul')).to.equal('istanbul');
+    });
+
+    it('spells out the Latin letters that do not decompose', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Straße')).to.equal('strasse');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ærø')).to.equal('aero');
+      expect(TextNormalizer.foldCaseAndDiacritics('Łódź')).to.equal('lodz');
+      expect(TextNormalizer.foldCaseAndDiacritics('Þórður')).to.equal('thordur');
+      expect(TextNormalizer.foldCaseAndDiacritics('Đà Nẵng')).to.equal('da nang');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ħamrun')).to.equal('hamrun');
+      expect(TextNormalizer.foldCaseAndDiacritics('Cœur')).to.equal('coeur');
+      expect(TextNormalizer.foldCaseAndDiacritics('Kız')).to.equal('kiz');
+    });
+
+    it('folds an alphabet consistently rather than half of it', (): void => {
+      // Danish: "å" decomposes and "æ"/"ø" do not, so without the expansions one
+      // half of the alphabet would fold and the other half would not.
+      expect(TextNormalizer.foldCaseAndDiacritics('Åse')).to.equal('ase');
+      expect(TextNormalizer.foldCaseAndDiacritics('Æble')).to.equal('aeble');
+      expect(TextNormalizer.foldCaseAndDiacritics('Øst')).to.equal('ost');
+    });
+
+    it('leaves the language dependent transcriptions alone', (): void => {
+      // "ü" decomposes to "u", so the German transcription to "ue" is not applied
+      // on top of it -- a value cannot fold to both.
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.equal('muller');
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.not.equal('mueller');
+    });
+
+    it('removes the Hebrew points', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u05e9\u05c1\u05b8\u05dc\u05d5\u05b9\u05dd'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u05e9\u05dc\u05d5\u05dd'));
+    });
+
+    it('removes the Arabic harakat', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u0645\u064e\u062f\u0652\u0631\u064e\u0633\u064e\u0629'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u0645\u062f\u0631\u0633\u0629'));
+    });
+
+    it('folds the Arabic alef variants onto the plain alef', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u0623\u062d\u0645\u062f'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u0627\u062d\u0645\u062f'));
+    });
+
+    it('keeps the marks a script writes obligatorily', (): void => {
+      // Thai vowel signs, Devanagari matras and the Japanese dakuten separate
+      // words rather than accent them, so folding must leave them alone.
+      const distinct = (values: string[]): number =>
+        new Set(values.map((value: string): string => TextNormalizer.foldCaseAndDiacritics(value))).size;
+      expect(distinct(['\u0e01\u0e34', '\u0e01\u0e35', '\u0e01\u0e38'])).to.equal(3);
+      expect(distinct(['\u0915\u093f', '\u0915\u0941', '\u0915\u0947'])).to.equal(3);
+      expect(distinct(['\u304b', '\u304c', '\u3071', '\u3070'])).to.equal(4);
+    });
+
+    it('leaves Chinese untouched and unifies the compatibility ideographs', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u4e2d\u6587')).to.equal('\u4e2d\u6587');
+      expect(TextNormalizer.foldCaseAndDiacritics('\uf900')).to.equal('\u8c48');
+    });
+  });
+
+  describe('normalizeInvisibleCharacters', () => {
+    it('returns an empty string unchanged', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('')).to.equal('');
+    });
+
+    it('drops a soft hyphen', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Do\u00adnau')).to.equal('Donau');
+    });
+
+    it('drops the zero width characters', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('a\u200bb\u200cc\u200dd\u2060e\ufeff')).to.equal('abcde');
+    });
+
+    it('turns a no-break space into a plain space', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cr\u00e8me\u00a0br\u00fbl\u00e9e')).to.equal('Cr\u00e8me br\u00fbl\u00e9e');
+    });
+
+    it('turns the other space variants into a plain space', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('a\u2009b\u202fc\u3000d')).to.equal('a b c d');
+    });
+
+    it('leaves an ordinary label untouched', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cremeschnitte')).to.equal('Cremeschnitte');
+    });
+
+    it('leaves casing and diacritics to the other function', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cr\u00e8me Br\u00fbl\u00e9e')).to.equal('Cr\u00e8me Br\u00fbl\u00e9e');
+    });
+  });
+});

package/core/utility/text-normalizer.ts

@@ -0,0 +1,98 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: @typo3/core/utility/text-normalizer
+ *
+ * Intl.Collator is deliberately not used: it compares whole strings rather than
+ * searching inside one, its result depends on the locale it is given, and at
+ * sensitivity "base" it merges the Japanese for "school" and for "cuckoo".
+ *
+ * @internal
+ */
+class TextNormalizer {
+  // The marks a script writes optionally, one constant per script so that each
+  // range can be read and checked against Unicode on its own. The marks Thai,
+  // Devanagari, Khmer, Lao and Japanese write obligatorily are deliberately
+  // absent: there a mark separates one word from another rather than accenting
+  // it, so removing it would fold the Japanese for "school" and for "cuckoo"
+  // into one value and leave a Thai filter narrowing nothing.
+
+  /** Combining diacritical marks, written by Latin, Greek and Cyrillic. */
+  private static readonly latinGreekCyrillicMarks = /[\u0300-\u036f]/g;
+
+  /** Hebrew points and cantillation. The gaps are punctuation, not marks. */
+  private static readonly hebrewPoints = /[\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7]/g;
+
+  /** Arabic harakat, hamza and madda, plus the superscript alef. */
+  private static readonly arabicHarakat = /[\u064b-\u065f\u0670]/g;
+
+  // Latin letters Unicode does not decompose, so stripping marks never reaches
+  // them. Without these an alphabet folds inconsistently: Danish "å" becomes "a"
+  // because it decomposes, while "æ" and "ø" would stay as they are.
+  //
+  // Only letters whose ASCII spelling is conventional rather than a matter of
+  // language are in here. The transcriptions that are a matter of language --
+  // German "ü" to "ue" rather than to "u" -- are not, because the decomposition
+  // already settles those.
+
+  /** Their conventional ASCII spelling, applied after the marks are stripped. */
+  private static readonly latinExpansions = new Map([
+    ['ß', 'ss'], ['æ', 'ae'], ['œ', 'oe'], ['þ', 'th'],
+    ['ø', 'o'], ['đ', 'd'], ['ð', 'd'], ['ł', 'l'],
+    ['ħ', 'h'], ['ı', 'i'], ['ĸ', 'k'], ['ŋ', 'n'],
+    ['ŧ', 't'],
+  ]);
+
+  /** Built from the map above so the letters are listed in one place only. */
+  private static readonly latinExpansionPattern =
+    new RegExp('[' + [...TextNormalizer.latinExpansions.keys()].join('') + ']', 'g');
+
+  /** Characters that take no width, so a reader cannot tell they are there. */
+  private static readonly zeroWidthCharacters = /[\u00ad\u200b-\u200d\u2060\ufeff]/g;
+
+  /** The space separators, all compared as a plain U+0020. */
+  private static readonly spaceVariants = /[\u00a0\u1680\u2000-\u200a\u202f\u205f\u3000]/g;
+
+  /**
+   * Lowercase, strip the optional marks and spell out the Latin letters that do
+   * not decompose, so that a filter matches "Crème" when "creme" is typed,
+   * "Straße" when "strasse" is typed, and an Arabic label carrying its harakat
+   * when it is typed without them.
+   *
+   * toLocaleLowerCase() is avoided: it follows the browser UI locale, where "I"
+   * folds to a dotless "ı".
+   */
+  public static foldCaseAndDiacritics(value: string): string {
+    return value
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(TextNormalizer.latinGreekCyrillicMarks, '')
+      .replace(TextNormalizer.hebrewPoints, '')
+      .replace(TextNormalizer.arabicHarakat, '')
+      .replace(TextNormalizer.latinExpansionPattern, (letter: string): string => TextNormalizer.latinExpansions.get(letter));
+  }
+
+  /**
+   * Drop the characters a reader cannot see and unify the space variants, so
+   * that a label carrying a soft hyphen or a no-break space still matches what
+   * is typed. Both arrive in labels by pasting.
+   */
+  public static normalizeInvisibleCharacters(value: string): string {
+    return value
+      .replace(TextNormalizer.zeroWidthCharacters, '')
+      .replace(TextNormalizer.spaceVariants, ' ');
+  }
+}
+
+export default TextNormalizer;

package/dashboard/dashboard.ts

@@ -565,10 +565,10 @@ export class Dashboard extends LitElement {
 
   private editDashboard(dashboard: DashboardInterface): void {
     const content = html`
-      <form>
+      <form id="dashboard-edit-form">
         <div class="form-group">
           <label class="form-label" for="dashboard-form-edit-title">${labels.get('dashboard.title')}</label>
-          <input class="form-control" id="dashboard-form-edit-title" type="text" name="title" value=${dashboard.title || ''} required="required">
+          <input class="form-control" id="dashboard-form-edit-title" type="text" name="title" value=${dashboard.title || ''} required="required" autofocus>
         </div>
       </form>
     `;
@@ -580,11 +580,6 @@ export class Dashboard extends LitElement {
       severity: SeverityEnum.notice,
       content,
       callback: (currentModal: ModalElement): void => {
-
-        currentModal.addEventListener('typo3-modal-shown', (): void => {
-          (currentModal.querySelector('#dashboard-form-edit-title') as HTMLInputElement)?.focus();
-        });
-
         currentModal.querySelector('form').addEventListener('submit', (e: Event): void => {
           e.preventDefault();
           const form = e.target as HTMLFormElement;
@@ -608,7 +603,7 @@ export class Dashboard extends LitElement {
           text: labels.get('dashboard.configure.button.ok'),
           btnClass: 'btn-primary',
           name: 'save',
-          trigger: (e, modal) => modal.querySelector('form').requestSubmit(),
+          form: 'dashboard-edit-form',
         },
       ]
     });

package/filelist/file-list-rename-handler.ts

@@ -51,10 +51,7 @@ class FileListRenameHandler {
             text: labels.get('file_rename.button.rename'),
             btnClass: 'btn-primary',
             name: 'rename',
-            trigger: (): void => {
-              const form: HTMLFormElement = modal.querySelector('form');
-              form?.requestSubmit();
-            },
+            form: 'file-list-rename-form',
           },
         ],
         callback: function (modal: ModalElement) {
@@ -119,11 +116,11 @@ class FileListRenameHandler {
       labels.get('folder_rename.label') :
       labels.get('file_rename.label');
     return html`
-      <form>
+      <form id="file-list-rename-form">
         <label class="form-label" for="rename_target">
           ${label}
         </label>
-        <input id="rename_target" name="name" class="form-control" value="${resource.name}" required>
+        <input id="rename_target" name="name" class="form-control" value="${resource.name}" required autofocus>
       </form>
     `;
   }

package/filelist/file-list-replace-handler.ts

@@ -57,10 +57,7 @@ class FileListReplaceHandler {
             text: labels.get('file_replace.button.replace'),
             btnClass: 'btn-primary',
             name: 'rename',
-            trigger: (): void => {
-              const form: HTMLFormElement = modal.querySelector('form');
-              form?.requestSubmit();
-            },
+            form: 'file-list-replace-form',
           },
         ],
         callback: function (modal: ModalElement) {
@@ -126,10 +123,10 @@ class FileListReplaceHandler {
             </dl>
           </div>
         </div>
-        <form>
+        <form id="file-list-replace-form">
           <div class="form-group">
             <label class="form-label" for="file_replace">${labels.get('file_replace.new_file.label')}</label>
-            <input id="file_replace" type="file" class="form-control" name="replace_1">
+            <input id="file_replace" type="file" class="form-control" name="replace_1" autofocus>
           </div>
           <div class="form-check">
             <input type="checkbox" value="1" id="keepFilename" name="keepFilename" class="form-check-input" checked>

package/filelist/file-list.ts

@@ -422,10 +422,9 @@ export default class Filelist {
         }
         trigger.value = value.toString(10);
         if (e.key === 'Enter' && value !== Number(trigger.dataset.currentpage)) {
-          const form = trigger.closest('form[name="fileListForm"]') as HTMLFormElement;
-          const submitUrl = new URL(form.action, window.origin);
-          submitUrl.searchParams.set('currentPage', value.toString());
-          window.location.href = submitUrl.toString();
+          const pagingUrl = new URL(trigger.dataset.pagingUrl, window.origin);
+          pagingUrl.searchParams.set('currentPage', value.toString());
+          window.location.href = pagingUrl.toString();
         }
       });
     });