Fixes #791

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);
+  }
 `;

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}