N°3207 - Global search: Keep input open and focus at the end of the query when running a search

js/components/global-search.js

@@ -26,7 +26,7 @@ $(function()
 		// default options
 		options:
 		{
-
+			init_opened: false,
 		},
 		css_classes:
 		{
@@ -45,6 +45,19 @@ $(function()
 		_create: function()
 		{
 			this.element.addClass('ibo-global-search');
+
+			if(this.options.init_opened === true) {
+				// Make sure the class is there
+				this.element.addClass(this.css_classes.opened);
+
+				// Solution for the focus at the end of the input found here https://stackoverflow.com/questions/4609405/set-focus-after-last-character-in-text-box
+				this.element.find(this.js_selectors.input).trigger('focus');
+				const sTmpVal = this.element.find(this.js_selectors.input).val();
+				this.element.find(this.js_selectors.input)
+					.val('')
+					.val(sTmpVal);
+			}
+
 			this._bindEvents();
 		},
 		// events bound via _bind are removed automatically

pages/UI.php

@@ -630,7 +630,10 @@ try
 					$sQueryLabel = $sFullText;
 				}
 				GlobalSearchHelper::AddQueryToHistory($sQuery, $sQueryIconUrl, $sQueryLabel);
-				$oP->GetTopBarLayout()->GetGlobalSearch()->SetLastQueries(GlobalSearchHelper::GetLastQueries());
+				$oP->GetTopBarLayout()
+					->GetGlobalSearch()
+					->SetQuery($sQuery)
+					->SetLastQueries(GlobalSearchHelper::GetLastQueries());
 
 				// Check the needle length
 				$iMinLenth = MetaModel::GetConfig()->Get('full_text_needle_min');

sources/application/UI/Base/Component/GlobalSearch/GlobalSearch.php

@@ -46,6 +46,8 @@ class GlobalSearch extends UIBlock
 
 	/** @var string $sEndpoint Absolute endpoint URL of the search form */
 	protected $sEndpoint;
+	/** @var string Query currently in the input */
+	protected $sQuery;
 	/** @var array $aLastQueries */
 	protected $aLastQueries;
 	/** @var bool $bShowHistory Whether or not to display the elements in the history */
@@ -65,6 +67,7 @@ class GlobalSearch extends UIBlock
 	{
 		parent::__construct($sId);
 		$this->SetEndpoint(static::DEFAULT_ENDPOINT_REL_URL);
+		$this->SetQuery('');
 		$this->SetLastQueries($aLastQueries);
 		$this->bShowHistory = (bool) MetaModel::GetConfig()->Get('global_search.show_history');
 		$this->iMaxHistoryResults = (int) MetaModel::GetConfig()->Get('global_search.max_history_results');
@@ -98,6 +101,36 @@ class GlobalSearch extends UIBlock
 		return $this->sEndpoint;
 	}
 
+	/**
+	 * @uses $sQuery
+	 * @param string $sQuery
+	 *
+	 * @return $this
+	 */
+	public function SetQuery(string $sQuery)
+	{
+		$this->sQuery = $sQuery;
+		return $this;
+	}
+
+	/**
+	 * @uses $sQuery
+	 * @return string
+	 */
+	public function GetQuery(): string
+	{
+		return $this->sQuery;
+	}
+
+	/**
+	 * @uses $sQuery
+	 * @return bool
+	 */
+	public function HasQuery(): bool
+	{
+		return !empty($this->sQuery);
+	}
+
 	/**
 	 * Set all the last queries at once
 	 *

templates/base/components/global-search/layout.html.twig

@@ -1,9 +1,13 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-global-search" data-role="ibo-global-search">
+<div id="{{ oUIBlock.GetId() }}"
+	 {# Note: The "ibo-is-opened" class is put there and not through the JS widget to avoid visual glitches #}
+	 {# Otherwise it would open only when the DOM is ready and the JS widget instantiated #}
+     class="ibo-global-search {% if oUIBlock.HasQuery() %}ibo-is-opened{% endif %}"
+     data-role="ibo-global-search">
 	<form action="{{ oUIBlock.GetEndpoint() }}" method="get" class="ibo-global-search--head" data-role="ibo-global-search--head">
 		<a href="#" class="ibo-global-search--icon" data-role="ibo-global-search--icon" data-tooltip-content="{{ 'UI:Component:GlobalSearch:Tooltip'|dict_s }}" data-tooltip-placement="bottom-start" data-tooltip-distance-offset="25">
 			<span class="fas fa-search"></span>
 		</a>
-		<input type="text" name="text" class="ibo-global-search--input" data-role="ibo-global-search--input" placeholder="{{ 'UI:Component:GlobalSearch:Input:Placeholder'|dict_s }}" autocomplete="off">
+		<input type="text" name="text" class="ibo-global-search--input" data-role="ibo-global-search--input" placeholder="{{ 'UI:Component:GlobalSearch:Input:Placeholder'|dict_s }}" value="{{ oUIBlock.GetQuery() }}" autocomplete="off">
 		<input type="hidden" name="operation" value="full_text">
 	</form>
 	<div class="ibo-global-search--drawer" data-role="ibo-global-search--drawer">

templates/base/components/global-search/layout.js.twig

@@ -1 +1,3 @@
-$('#{{ oUIBlock.GetId() }}').global_search();
+$('#{{ oUIBlock.GetId() }}').global_search({
+	init_opened: {{ oUIBlock.HasQuery()|var_export }}
+});