Merge pull request #2301 from crazyserver/MOBILE-3281

MOBILE-3281 search: Use iOS touch events

src/core/search/components/search-box/core-search-box.html

@@ -1,7 +1,7 @@
 <ion-card>
     <form #f="ngForm" (ngSubmit)="submitForm($event)" role="search" #searchForm>
         <ion-item>
-            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (focus)="showHistory()" (blur)="hideHistory()"></ion-input>
+            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"></ion-input>
             <button item-end ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
                 <ion-icon name="search"></ion-icon>
             </button>
@@ -9,13 +9,11 @@
                 <ion-icon name="close"></ion-icon>
             </button>
         </ion-item>
-        <div class="core-search-history" *ngIf="historyShown && history.length">
-            <ion-list class="with-borders">
-                <ion-item text-wrap *ngFor="let item of history" (mousedown)="itemMouseDown($event, item.searchedtext)" (mouseup)="itemMouseUp($event, item.searchedtext)" class="core-clickable">
-                    <core-icon name="fa-history" item-start></core-icon>
-                    {{item.searchedtext}}
-                </ion-item>
-            </ion-list>
-        </div>
+        <ion-list class="core-search-history with-borders">
+            <a ion-item text-wrap *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" class="core-clickable" tabindex="1">
+                <core-icon name="fa-history" item-start></core-icon>
+                {{item.searchedtext}}
+            </a>
+        </ion-list>
     </form>
 </ion-card>

src/core/search/components/search-box/search-box.scss

@@ -22,12 +22,8 @@ ion-app.app-root core-search-box {
         padding-left: 0 !important;
     }
 
-    .item-wp .text-input {
-        border: 0;
-        margin: 0;
-    }
-
     .core-search-history {
+        display: none;
         max-height: calc(-120px + 80vh);
         overflow-y: auto;
 
@@ -39,4 +35,10 @@ ion-app.app-root core-search-box {
             border-bottom: 0;
         }
     }
+
+    form:focus-within {
+        .core-search-history {
+            display: block;
+        }
+    }
 }

src/core/search/components/search-box/search-box.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
@@ -34,7 +34,7 @@ import { CoreSearchHistoryProvider, CoreSearchHistoryItem } from '../../provider
     selector: 'core-search-box',
     templateUrl: 'core-search-box.html'
 })
-export class CoreSearchBoxComponent implements OnInit, OnDestroy {
+export class CoreSearchBoxComponent implements OnInit {
     @Input() searchLabel?: string; // Label to be used on action button.
     @Input() placeholder?: string; // Placeholder text for search text input.
     @Input() autocorrect = 'on'; // Enables/disable Autocorrection on search text input.
@@ -57,9 +57,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
     history: CoreSearchHistoryItem[] = [];
     historyShown = false;
 
-    protected elementClicked = '';
-    protected backdropMouseUpFunc;
-
     constructor(protected translate: TranslateService,
             protected utils: CoreUtilsProvider,
             protected searchHistoryProvider: CoreSearchHistoryProvider,
@@ -80,8 +77,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
 
         if (this.searchArea) {
             this.loadHistory();
-
-            this.backdropMouseUpFunc = this.backdropMouseUp.bind(this);
         }
     }
 
@@ -132,72 +127,17 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
         this.history = await this.searchHistoryProvider.getSearchHistory(this.searchArea);
     }
 
-    /**
-     * Show search history.
-     */
-    showHistory(): void {
-        if (this.searchArea) {
-            this.historyShown = true;
-            this.elementClicked = '';
-            document.body.addEventListener('mouseup', this.backdropMouseUpFunc);
-        }
-    }
-
-    /**
-     * Hide search history.
-     *
-     * @param force: If force hidding the history without checking the clicked element.
-     */
-    hideHistory(force: boolean = false): void {
-        if (this.searchArea && (force || this.elementClicked == '')) {
-            this.historyShown = false;
-            this.elementClicked = '';
-
-            document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
-        }
-    }
-
-    /**
-     * Saves the item where you moused down.
-     * It uses mouseup/down because blur will block the click event.
-     *
-     * @param e Event.
-     * @param text Selected text.
-     */
-    itemMouseDown(e: Event, text: string): void {
-        this.elementClicked = text;
-    }
-
     /**
      * Select an item and use it for search text.
-     * It uses mouseup/down because blur will block the click event.
      *
      * @param e Event.
      * @param text Selected text.
      */
-    itemMouseUp(e: Event, text: string): void {
-        if (this.elementClicked == text) {
-            this.hideHistory(true);
-            if (this.searched != text) {
-                this.searchText = text;
-                this.submitForm(e);
-            }
+    historyClicked(e: Event, text: string): void {
+        if (this.searched != text) {
+            this.searchText = text;
+            this.submitForm(e);
         }
-        this.elementClicked = '';
-    }
-
-    /**
-     * Manages mouseup out of the history.
-     *
-     * @param e Event.
-     */
-    backdropMouseUp(e: Event): void {
-        // Do not hide if the search box is focused.
-        if (document.activeElement['type'] && document.activeElement['type'] == 'search') {
-            return;
-        }
-        this.hideHistory();
-        this.elementClicked = '';
     }
 
     /**
@@ -206,16 +146,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
     clearForm(): void {
         this.searched = '';
         this.searchText = '';
-        this.hideHistory(true);
         this.onClear.emit();
     }
-
-    /**
-     * On destroy of the component, clear up any listeners.
-     */
-    ngOnDestroy(): void {
-        if (this.backdropMouseUpFunc) {
-            document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
-        }
-    }
 }