From 8814746738eaace5bdf3fc376ac5419eec5bded7 Mon Sep 17 00:00:00 2001
From: Buni48 <37407974+Buni48@users.noreply.github.com>
Date: Wed, 11 May 2022 14:33:27 +0200
Subject: [PATCH] Prevent toggling password & clearing on disabled form
 controls (#746)

* prevent toggling password & clearing on disabled form controls

* hide clear icon also on readonly
---
 src/components/input/input.ts   | 5 +++--
 src/components/select/select.ts | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 4fa95fd71..a266ae189 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -297,6 +297,7 @@ export default class SlInput extends LitElement {
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && this.value.length > 0;
 
     return html`
       <div
@@ -378,7 +379,7 @@ export default class SlInput extends LitElement {
               @blur=${this.handleBlur}
             />
 
-            ${this.clearable && this.value.length > 0
+            ${hasClearIcon
               ? html`
                   <button
                     part="clear-button"
@@ -394,7 +395,7 @@ export default class SlInput extends LitElement {
                   </button>
                 `
               : ''}
-            ${this.togglePassword
+            ${this.togglePassword && !this.disabled
               ? html`
                   <button
                     part="password-toggle-button"
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 854f5c28f..e20d62e86 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -450,6 +450,7 @@ export default class SlSelect extends LitElement {
     const hasSelection = this.multiple ? this.value.length > 0 : this.value !== '';
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && hasSelection;
 
     return html`
       <div
@@ -530,7 +531,7 @@ export default class SlSelect extends LitElement {
                   : this.placeholder}
               </div>
 
-              ${this.clearable && hasSelection
+              ${hasClearIcon
                 ? html`
                     <button
                       part="clear-button"