fix(input): block actions if disabled

ovh · Jul 31, 2023 · 4f5b2ee · 4f5b2ee
1 parent 1ed99a0
commit 4f5b2ee
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 34 deletions.
diff --git a/packages/libraries/core/src/components/input/ods-input-controller.ts b/packages/libraries/core/src/components/input/ods-input-controller.ts
@@ -37,7 +37,7 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
         }
       }
     }
-  }  
+  }
 
   /**
    * get the validity object properties of the component.
@@ -88,7 +88,7 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
           return false;
         });
     }
-  }  
+  }
 
   onFormControlChange(formControl?: OdsFormControl<OdsInputValidityState>) {
     this.logger.log(`[input=${this.component.value}]`, 'onFormControlChange', formControl, formControl && formControl.id);
@@ -199,14 +199,18 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
   }
 
   clear() {
-    this.logger.debug('clear', this.component.inputEl?.value);
-    this.component.value = '';
-    if (this.component.inputEl) {
-      this.component.inputEl.value = '';
+    if (!this.component.disabled) {
+      this.logger.debug('clear', this.component.inputEl?.value);
+      this.component.value = '';
+      if (this.component.inputEl) {
+        this.component.inputEl.value = '';
+      }
     }
   }
 
   hide() {
-    this.component.masked = !this.component.masked;
+    if (!this.component.disabled) {
+      this.component.masked = !this.component.masked;
+    }
   }
 }
diff --git a/packages/stencil/components/input/src/components/osds-input/osds-input.e2e.ts b/packages/stencil/components/input/src/components/osds-input/osds-input.e2e.ts
@@ -77,6 +77,21 @@ describe('e2e:osds-input', () => {
       const value = await inputElement.getProperty('value');
       expect(value).toBe('');
     });
+
+    it('should not clear the input value when clicked if the input is disabled', async () => {
+      // Setup component with clearable attribute and some initial value
+      await setup({ attributes: { type: OdsInputType.text, value: 'Just ODS being ahead', clearable: true, disabled: true } });
+
+      // Click cross icon/button
+      const crossIcon = await page.find('osds-input >>> osds-icon[name="close"]');
+      expect(crossIcon).not.toBeNull();
+      await crossIcon.click();
+      await page.waitForChanges();
+
+      // Verify input value is cleared
+      const value = await inputElement.getProperty('value');
+      expect(value).toBe('Just ODS being ahead');
+    });
   });
 
   describe('attribute:masked', () => {
@@ -88,7 +103,7 @@ describe('e2e:osds-input', () => {
       expect(type).toBe(OdsInputType.password);
     });
 
-    it('should change input type to text when masked is set', async () => {
+    it('should change input type to text when masked is set to false', async () => {
       await setup({ attributes: { type: OdsInputType.password, value: 'Just ODS being ahead', masked: false } });
 
       const type = await inputElement.getProperty('type');

diff --git a/packages/stencil/components/input/src/components/osds-input/osds-input.scss b/packages/stencil/components/input/src/components/osds-input/osds-input.scss
@@ -27,6 +27,10 @@
   cursor: pointer;
 }
 
+:host([disabled]) osds-icon {
+  cursor: not-allowed;
+}
+
 input {
   box-sizing: border-box;
   text-align: var(--ods-input-text-align, left);

diff --git a/packages/stencil/components/input/src/index.html b/packages/stencil/components/input/src/index.html
@@ -21,10 +21,10 @@
 </head>
 <body style="margin: 0;">
 
-  <osds-input type="date" value="2002-09-11" min="2000-01-01" flex></osds-input>
-  <osds-input type="text"></osds-input>
-  <osds-input type="email"></osds-input>
-  <osds-input type="time"></osds-input>
+  <osds-input type="text" value="On Vous Héberge ?" disabled clearable></osds-input>
+  <osds-input type="password" value="On Vous Héberge ?" disabled clearable></osds-input>
+  <osds-input type="text" value="On Vous Héberge ?" clearable></osds-input>
+  <osds-input type="password" value="On Vous Héberge ?" clearable></osds-input>
 
   <section style="background: none; padding: 1em;">
     <h2>[types]</h2>
@@ -46,12 +46,12 @@ <h2>[flex]</h2>
   <script>
     const types = [
       'date',
-      'email', 
-      'number', 
-      'password', 
-      'search', 
-      'tel', 
-      'text', 
+      'email',
+      'number',
+      'password',
+      'search',
+      'tel',
+      'text',
       'time',
       'url'
     ];
@@ -70,53 +70,53 @@ <h2>[flex]</h2>
     ];
 
     const colors = [
-      'default', 
-      'primary', 
-      'text', 
-      'accent', 
-      'error', 
-      'warning', 
-      'success', 
-      'info', 
+      'default',
+      'primary',
+      'text',
+      'accent',
+      'error',
+      'warning',
+      'success',
+      'info',
       'promotion'
     ];
 
     const placeholder = (type) => `Enter ${type}...`;
 
-    const rows = attributes.map(attribute => 
+    const rows = attributes.map(attribute =>
       `<tr>
         <td>${attribute}</td>
-        ${types.map(type => 
+        ${types.map(type =>
           `<td><osds-input type="${type}" placeholder="${placeholder(type)}" ${attribute}></osds-input></td>`).join('')
         }
       </tr>`
     ).join('');
 
     document.getElementById('input-table').innerHTML = `<thead><tr><td></td>${types.map(type => `<td>${type}</td>`).join('')}</tr></thead><tbody>${rows}</tbody>`;
 
-    const colorRows = attributes.map(attribute => 
+    const colorRows = attributes.map(attribute =>
       `<tr>
         <td>${attribute}</td>
-        ${colors.map(color => 
+        ${colors.map(color =>
           `<td><osds-input color="${color}" type="text" placeholder="${placeholder('text')}" ${attribute}></osds-input></td>`).join('')
         }
       </tr>`
     ).join('');
 
     document.getElementById('input-table-color').innerHTML = `<thead><tr><td></td>${colors.map(color => `<td>${color}</td>`).join('')}</tr></thead><tbody>${colorRows}</tbody>`;
 
-    const contrastedRows = attributes.map(attribute => 
+    const contrastedRows = attributes.map(attribute =>
       `<tr>
         <td style="color: #fff;">${attribute}</td>
-        ${colors.map(color => 
+        ${colors.map(color =>
           `<td><osds-input color="${color}" type="text" contrasted placeholder="${placeholder('text')}" ${attribute}></osds-input></td>`).join('')
         }
       </tr>`
     ).join('');
 
     document.getElementById('input-table-contrasted').innerHTML = `<thead><tr><td></td>${colors.map(color => `<td style="color: #fff;">${color}</td>`).join('')}</tr></thead><tbody>${contrastedRows}</tbody>`;
 
-    const flexRows = attributes.map(attribute => 
+    const flexRows = attributes.map(attribute =>
       `<tr>
         <td>${attribute}</td>
         <td style="width: 80%;"><osds-input flex type="text" placeholder="${placeholder('text')}" ${attribute}></osds-input></td>
@@ -125,7 +125,7 @@ <h2>[flex]</h2>
 
     document.getElementById('input-table-flex').innerHTML = `<thead><tr><td></td><td>flex</td></tr></thead><tbody>${flexRows}</tbody>`;
   </script>
-  
+
   <article>
     <h2>[number odsInput-1]</h2>
     <osds-input