[TASK] Add clear button for search in TypoScript Object Browser

Resolves: #48935
Releases: master
Change-Id: Ibbd57f0f140606ceb1bd64da93ef93cb316a1336
Reviewed-on: http://review.typo3.org/43576


Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Michael Oehlhof <typo3@oehlhof.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>

typo3/sysext/tstemplate/Classes/Controller/TypoScriptTemplateObjectBrowserModuleFunctionController.php

@@ -403,24 +403,27 @@ class TypoScriptTemplateObjectBrowserModuleFunctionController extends AbstractFu
 			$theOutput .= '
 				<div class="tsob-menu">
 					<div class="form-inline">';
-			if(is_array($this->pObj->MOD_MENU['ts_browser_type']) && count($this->pObj->MOD_MENU['ts_browser_type']) > 1){
+			if (is_array($this->pObj->MOD_MENU['ts_browser_type']) && count($this->pObj->MOD_MENU['ts_browser_type']) > 1) {
 				$theOutput .= '
 						<div class="form-group">
 							<label class="control-label">' . $lang->getLL('browse') . '</label>'
 							. BackendUtility::getDropdownMenu($this->pObj->id, 'SET[ts_browser_type]', $bType, $this->pObj->MOD_MENU['ts_browser_type']). '
 						</div>';
 			}
-			if(is_array($this->pObj->MOD_MENU['ts_browser_toplevel_' . $bType]) && count($this->pObj->MOD_MENU['ts_browser_toplevel_' . $bType]) > 1){
+			if (is_array($this->pObj->MOD_MENU['ts_browser_toplevel_' . $bType]) && count($this->pObj->MOD_MENU['ts_browser_toplevel_' . $bType]) > 1) {
 				$theOutput .= '
 						<div class="form-group">
 							<label class="control-label" for="ts_browser_toplevel_' . $bType . '">' . $lang->getLL('objectList') . '</label> '
 							. BackendUtility::getDropdownMenu($this->pObj->id, 'SET[ts_browser_toplevel_' . $bType . ']', $this->pObj->MOD_SETTINGS['ts_browser_toplevel_' . $bType], $this->pObj->MOD_MENU['ts_browser_toplevel_' . $bType]) . '
 						</div>';
 			}
+
+			$this->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser');
+
 			$theOutput .= '
 						<div class="form-group">
 							<label class="control-label" for="search_field">' . $lang->getLL('search') . '</label>
-							<input class="form-control" type="search" name="search_field" id="search_field" value="' . htmlspecialchars($POST['search_field']) . '"' . $documentTemplate->formWidth(20) . '/>
+							<div class="form-group"><input class="form-control" type="search" name="search_field" id="search_field" value="' . htmlspecialchars($POST['search_field']) . '" /></div>
 						</div>
 						<input class="btn btn-default tsob-search-submit" type="submit" name="search" value="' . $lang->sL('LLL:EXT:lang/locallang_common.xlf:search') . '" />
 					</div>

typo3/sysext/tstemplate/Resources/Public/JavaScript/TypoScriptObjectBrowser.js

+/*
+ * 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!
+ */
+
+/**
+ * JavaScript for TypoScript Object Browser
+ */
+define('TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser', ['jquery', 'TYPO3/CMS/Backend/jquery.clearable'], function($) {
+
+	var $searchFields = $('input[name="search_field"]');
+	var searchResultShown = ('' !== $searchFields.first().val());
+
+	// make search field clearable
+	$searchFields.clearable({
+		onClear: function() {
+			if (searchResultShown) {
+				$(this).closest('form').submit();
+			}
+		}
+	});
+
+});
\ No newline at end of file