[TASK] Align configuration module search bar
[Packages/TYPO3.CMS.git] / Build / Sources / TypeScript / lowlevel / Resources / Public / TypeScript / ConfigurationView.ts
index ff36025..1dd4f53 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
-import $ from 'jquery';
-import 'TYPO3/CMS/Backend/Input/Clearable';
+import DocumentService = require('TYPO3/CMS/Core/DocumentService');
+import RegularEvent = require('TYPO3/CMS/Core/Event/RegularEvent');
 
 /**
  * Module: TYPO3/CMS/Lowlevel/ConfigurationView
  * JavaScript for Configuration View
  */
 class ConfigurationView {
-  private searchField: HTMLInputElement = document.querySelector('input[name="searchString"]');
+  private searchForm: HTMLFormElement = document.querySelector('#ConfigurationView');
+  private searchField: HTMLInputElement = this.searchForm.querySelector('input[name="searchString"]');
   private searchResultShown: boolean = ('' !== this.searchField.value);
 
   constructor() {
-    // make search field clearable
-    this.searchField.clearable({
-      onClear: (input: HTMLInputElement): void => {
-        if (this.searchResultShown) {
-          input.closest('form').submit();
+    DocumentService.ready().then((): void => {
+      // Respond to browser related clearable event
+      new RegularEvent('search', (): void => {
+        if (this.searchField.value === '' && this.searchResultShown) {
+          this.searchForm.submit();
         }
-      },
+      }).bindTo(this.searchField);
     });
+
     if (self.location.hash) {
       // scroll page down, so the just opened subtree is visible after reload and not hidden by doc header
       $('html, body').scrollTop((document.documentElement.scrollTop || document.body.scrollTop) - 80);