[TASK] Auto focus search field in "New Content Element" filter

To improve the user experience, the search filter in the "New Content
Element" wizard is automatically focussed when the modal appears.

Resolves: #91014
Releases: master
Change-Id: I3e0f18bd454955af63cd797138de7b2118d9d2ac
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64129


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Josef Glatz <josefglatz@gmail.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Josef Glatz <josefglatz@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/NewContentElementWizard.ts

@@ -37,6 +37,10 @@ export default class NewContentElementWizard {
     this.registerEvents();
   }
 
+  public focusSearchField(): void {
+    this.searchField.focus();
+  }
+
   private registerClearable(): void {
     this.searchField.clearable({
       onClear: (input: HTMLInputElement): void => {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Wizard/NewContentElement.ts

@@ -32,7 +32,17 @@ class NewContentElement {
       title,
       type: Modal.types.ajax,
     }).on('modal-loaded', (): void => {
-      new NewContentElementWizard($modal);
+      // This rather works in local environments only
+      $modal.on('shown.bs.modal', (): void => {
+        const wizard = new NewContentElementWizard($modal);
+        wizard.focusSearchField();
+      });
+    }).on('shown.bs.modal', (): void => {
+      // This is the common case with any latency that the modal is rendered before the content is loaded
+      $modal.on('modal-loaded', (): void => {
+        const wizard = new NewContentElementWizard($modal);
+        wizard.focusSearchField();
+      });
     });
   }
 }

typo3/sysext/backend/Resources/Public/JavaScript/NewContentElementWizard.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","TYPO3/CMS/Core/Event/DebounceEvent","TYPO3/CMS/Core/Event/RegularEvent","./Input/Clearable"],(function(e,t,s,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class i{constructor(e){this.context=e.get(0),this.searchField=this.context.querySelector(".t3js-contentWizard-search"),this.registerClearable(),this.registerEvents()}static getTabIdentifier(e){const t=e.querySelector("a"),[,s]=t.href.split("#");return s}static countVisibleContentElements(e){return e.querySelectorAll(".media-new-content-element-wizard:not(.hidden)").length}registerClearable(){this.searchField.clearable({onClear:e=>{e.value="",this.filterElements(e)}})}registerEvents(){new n("keydown",e=>{const t=e.target;"Escape"===e.code&&(e.stopImmediatePropagation(),t.value="")}).bindTo(this.searchField),new s("keyup",e=>{this.filterElements(e.target)},150).bindTo(this.searchField),new n("submit",e=>{e.preventDefault()}).bindTo(this.searchField.closest("form")),new n("click",e=>{e.preventDefault(),e.stopPropagation()}).delegateTo(this.context,".t3js-tabs .disabled")}filterElements(e){const t=e.closest("form"),s=t.querySelector(".t3js-tabs"),n=t.querySelector(".t3js-filter-noresult");t.querySelectorAll(".media.media-new-content-element-wizard").forEach(t=>{const s=t.textContent.trim().replace(/\s+/g," ");t.classList.toggle("hidden",""!==e.value&&!RegExp(e.value,"i").test(s))});const r=i.countVisibleContentElements(t);s.parentElement.classList.toggle("hidden",0===r),n.classList.toggle("hidden",r>0),this.switchTabIfNecessary(s)}switchTabIfNecessary(e){const t=e.querySelector(".active"),s=Array.from(t.parentNode.children);for(let e of s){const t=i.getTabIdentifier(e);e.classList.toggle("disabled",!this.hasTabContent(t))}if(!this.hasTabContent(i.getTabIdentifier(t)))for(let n of s){if(n===t)continue;const s=i.getTabIdentifier(n);if(this.hasTabContent(s)){this.switchTab(e.parentElement,s);break}}}hasTabContent(e){const t=this.context.querySelector(`#${e}`);return i.countVisibleContentElements(t)>0}switchTab(e,t){const s=e.querySelector(`a[href="#${t}"]`),n=this.context.querySelector(`#${t}`);e.querySelector(".t3js-tabmenu-item.active").classList.remove("active"),e.querySelector(".tab-pane.active").classList.remove("active"),s.parentElement.classList.add("active"),n.classList.add("active")}}t.default=i}));
\ No newline at end of file
+define(["require","exports","TYPO3/CMS/Core/Event/DebounceEvent","TYPO3/CMS/Core/Event/RegularEvent","./Input/Clearable"],(function(e,t,s,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});class n{constructor(e){this.context=e.get(0),this.searchField=this.context.querySelector(".t3js-contentWizard-search"),this.registerClearable(),this.registerEvents()}static getTabIdentifier(e){const t=e.querySelector("a"),[,s]=t.href.split("#");return s}static countVisibleContentElements(e){return e.querySelectorAll(".media-new-content-element-wizard:not(.hidden)").length}focusSearchField(){this.searchField.focus()}registerClearable(){this.searchField.clearable({onClear:e=>{e.value="",this.filterElements(e)}})}registerEvents(){new i("keydown",e=>{const t=e.target;"Escape"===e.code&&(e.stopImmediatePropagation(),t.value="")}).bindTo(this.searchField),new s("keyup",e=>{this.filterElements(e.target)},150).bindTo(this.searchField),new i("submit",e=>{e.preventDefault()}).bindTo(this.searchField.closest("form")),new i("click",e=>{e.preventDefault(),e.stopPropagation()}).delegateTo(this.context,".t3js-tabs .disabled")}filterElements(e){const t=e.closest("form"),s=t.querySelector(".t3js-tabs"),i=t.querySelector(".t3js-filter-noresult");t.querySelectorAll(".media.media-new-content-element-wizard").forEach(t=>{const s=t.textContent.trim().replace(/\s+/g," ");t.classList.toggle("hidden",""!==e.value&&!RegExp(e.value,"i").test(s))});const r=n.countVisibleContentElements(t);s.parentElement.classList.toggle("hidden",0===r),i.classList.toggle("hidden",r>0),this.switchTabIfNecessary(s)}switchTabIfNecessary(e){const t=e.querySelector(".active"),s=Array.from(t.parentNode.children);for(let e of s){const t=n.getTabIdentifier(e);e.classList.toggle("disabled",!this.hasTabContent(t))}if(!this.hasTabContent(n.getTabIdentifier(t)))for(let i of s){if(i===t)continue;const s=n.getTabIdentifier(i);if(this.hasTabContent(s)){this.switchTab(e.parentElement,s);break}}}hasTabContent(e){const t=this.context.querySelector(`#${e}`);return n.countVisibleContentElements(t)>0}switchTab(e,t){const s=e.querySelector(`a[href="#${t}"]`),i=this.context.querySelector(`#${t}`);e.querySelector(".t3js-tabmenu-item.active").classList.remove("active"),e.querySelector(".tab-pane.active").classList.remove("active"),s.parentElement.classList.add("active"),i.classList.add("active")}}t.default=n}));
\ No newline at end of file

typo3/sysext/backend/Resources/Public/JavaScript/Wizard/NewContentElement.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","../Enum/Severity","../Modal","TYPO3/CMS/Backend/NewContentElementWizard"],(function(e,t,n,a,d){"use strict";return class{static wizard(e,t){const i=a.advanced({callback:e=>{e.find(".t3js-modal-body").addClass("t3-new-content-element-wizard-window")},content:e,severity:n.SeverityEnum.notice,size:a.sizes.medium,title:t,type:a.types.ajax}).on("modal-loaded",()=>{new d.default(i)})}}}));
\ No newline at end of file
+define(["require","exports","../Enum/Severity","../Modal","TYPO3/CMS/Backend/NewContentElementWizard"],(function(e,n,t,d,a){"use strict";return class{static wizard(e,n){const o=d.advanced({callback:e=>{e.find(".t3js-modal-body").addClass("t3-new-content-element-wizard-window")},content:e,severity:t.SeverityEnum.notice,size:d.sizes.medium,title:n,type:d.types.ajax}).on("modal-loaded",()=>{o.on("shown.bs.modal",()=>{new a.default(o).focusSearchField()})}).on("shown.bs.modal",()=>{o.on("modal-loaded",()=>{new a.default(o).focusSearchField()})})}}}));
\ No newline at end of file