fix(input-field): fix toggling disabled trailing icon

Lundalogik · May 14, 2024 · 1a6e0b6 · 1a6e0b6
1 parent e3fa0b2
commit 1a6e0b6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 44 deletions.
diff --git a/src/components/input-field/input-field.e2e.ts b/src/components/input-field/input-field.e2e.ts
@@ -146,7 +146,7 @@ describe('limel-input-field', () => {
                 if (type.name !== 'textarea') {
                     it('has a trailing icon indicating the field is invalid', async () => {
                         const limelIcon = await page.find(
-                            'limel-input-field>>>i.mdc-text-field__icon.mdc-text-field__icon--trailing>limel-icon',
+                            'limel-input-field>>>i.mdc-text-field__icon.invalid-icon>limel-icon',
                         );
                         expect(limelIcon).toBeTruthy();
                         expect(limelIcon).toEqualAttribute(

diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
@@ -175,7 +175,7 @@ input.mdc-text-field__input {
     }
 }
 .mdc-text-field--with-trailing-icon {
-    .mdc-text-field__icon--trailing {
+    .mdc-text-field__icon:last-child {
         padding: 0.25rem;
         margin-right: 0.25rem;
     }

diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
@@ -286,6 +286,8 @@ export class InputField {
         if (this.invalid) {
             this.mdcTextField.valid = false;
         }
+
+        this.mdcTextField.disabled = this.disabled || this.readonly;
     }
 
     public render() {
@@ -627,17 +629,13 @@ export class InputField {
             return;
         }
 
-        const html = [];
-
         const trailingIcon = this.getTrailingIcon();
 
         if (!this.isInvalid() && this.hasLink()) {
-            html.push(this.renderLinkIcon(this.getLink(), trailingIcon));
+            return this.renderLinkIcon(this.getLink(), trailingIcon);
         } else if (trailingIcon) {
-            html.push(this.renderTrailingIcon(trailingIcon));
+            return this.renderTrailingIcon(trailingIcon);
         }
-
-        return html;
     };
 
     private hasLink = () => {
@@ -683,19 +681,25 @@ export class InputField {
     };
 
     private renderTrailingIcon = (icon: string) => {
-        const props: any = {
-            tabIndex: this.isInvalid() ? '-1' : '0',
-        };
-        if (!this.isInvalid()) {
-            props.onKeyPress = this.handleIconKeyPress;
-            props.onClick = this.handleIconClick;
-            props.role = 'button';
+        if (this.isInvalid()) {
+            return (
+                <i
+                    key="invalid"
+                    class="material-icons mdc-text-field__icon invalid-icon"
+                >
+                    <limel-icon name={icon} />
+                </i>
+            );
         }
 
         return (
             <i
+                key="action"
                 class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing"
-                {...props}
+                tabIndex={0}
+                role="button"
+                onKeyPress={this.handleIconKeyPress}
+                onClick={this.handleIconClick}
             >
                 <limel-icon name={icon} />
             </i>
@@ -918,16 +922,14 @@ export class InputField {
     };
 
     private handleIconClick = () => {
-        if (!this.isInvalid()) {
-            this.action.emit();
-        }
+        this.action.emit();
     };
 
     private handleIconKeyPress = (event: KeyboardEvent) => {
         const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
         const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;
 
-        if ((isSpace || isEnter) && !this.isInvalid()) {
+        if (isSpace || isEnter) {
             this.action.emit();
         }
     };

diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
@@ -237,7 +237,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
                 box-shadow: 0 0 0 functions.pxToRem(2) var(--mdc-theme-primary) !important; // has to be `!important` since we're using `box-shadow` insted of `outline` which is also used in `hover` mode
             }
         }
-        &:hover {
+        &:not(.mdc-text-field--disabled):hover {
             .mdc-text-field__icon--trailing {
                 box-shadow: var(--button-shadow-normal);
                 background-color: rgba(var(--contrast-100), 0.4);
@@ -253,27 +253,8 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             }
         }
 
-        &.mdc-text-field--disabled,
         &.mdc-text-field--invalid {
-            // `mdc-text-field--invalid` displays a (!) icon, which we don't want it to appear interactive
-            &:hover {
-                .mdc-text-field__icon--trailing {
-                    box-shadow: none;
-                    background-color: transparent;
-
-                    &:hover {
-                        background-color: transparent;
-                        box-shadow: none;
-                    }
-
-                    &:active {
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-        &.mdc-text-field--invalid {
-            i.mdc-text-field__icon.mdc-text-field__icon--trailing {
+            i.mdc-text-field__icon.invalid-icon {
                 limel-icon {
                     color: var(--lime-error-text-color);
                 }
@@ -310,9 +291,6 @@ $cropped-label-hack--font-size: 0.875rem; //14px
                     color: var(--lime-error-text-color);
                 }
             }
-            .mdc-text-field__icon--trailing {
-                color: var(--lime-error-text-color);
-            }
         }
 
         &.mdc-text-field--with-trailing-icon {