From e4898f4b9284c18f4a43aa14dde117eca579c1b0 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 29 Sep 2021 21:47:38 +0200
Subject: [PATCH] web/elements: use dedicated button for search clear instead
 of webkit exclusive one

closes #1499

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/table/TableSearch.ts | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts
index 321cee8ad..91f3cf376 100644
--- a/web/src/elements/table/TableSearch.ts
+++ b/web/src/elements/table/TableSearch.ts
@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 
-import { CSSResult, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 
@@ -20,7 +20,19 @@ export class TableSearch extends LitElement {
     onSearch?: (value: string) => void;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl, AKGlobal];
+        return [
+            PFBase,
+            PFButton,
+            PFToolbar,
+            PFInputGroup,
+            PFFormControl,
+            AKGlobal,
+            css`
+                ::-webkit-search-cancel-button {
+                    display: none;
+                }
+            `,
+        ];
     }
 
     render(): TemplateResult {
@@ -50,6 +62,16 @@ export class TableSearch extends LitElement {
                             this.onSearch((ev.target as HTMLInputElement).value);
                         }}
                     />
+                    <button
+                        class="pf-c-button pf-m-control"
+                        type="reset"
+                        @click=${() => {
+                            if (!this.onSearch) return;
+                            this.onSearch("");
+                        }}
+                    >
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                    </button>
                     <button class="pf-c-button pf-m-control" type="submit">
                         <i class="fas fa-search" aria-hidden="true"></i>
                     </button>