From 1c23daa3b16b87726a7a8cc84c537209df73725d Mon Sep 17 00:00:00 2001
From: Buni48 <dago24@posteo.de>
Date: Sun, 19 Jun 2022 18:37:38 +0200
Subject: [PATCH] Fixes #791

---
 src/components/input/input.styles.ts | 5 +++++
 src/components/input/input.ts        | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 721e72ddd..403e73426 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -280,4 +280,9 @@ export default css`
   ::-ms-reveal {
     display: none;
   }
+
+  /* Don't show the firefox clear icon in Firefox */
+  .hide-firefox-clear-icon {
+    clip-path: inset(0 2em 0 0);
+  }
 `;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index ba21ae2bd..04fc91f74 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -301,6 +301,8 @@ export default class SlInput extends LitElement {
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
+    const isFirefox = typeof window.InstallTrigger !== 'undefined';
+    const hideFirefoxClearIcon = isFirefox && (this.type === 'date' || this.type === 'time');
 
     return html`
       <div
@@ -351,7 +353,10 @@ export default class SlInput extends LitElement {
             <input
               part="input"
               id="input"
-              class="input__control"
+              class="${classMap({
+                input__control: true,
+                'hide-firefox-clear-icon': hideFirefoxClearIcon
+              })}"
               type=${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}