Merge pull request #105 from ing-bank/fix/readonlyDatepicker

fix(input-datepicker): disable invoker when readonly

packages/input-datepicker/src/LionInputDatepicker.js

@@ -197,20 +197,28 @@ export class LionInputDatepicker extends LionInputDate {
    */
   _requestUpdate(name, oldValue) {
     super._requestUpdate(name, oldValue);
+
     if (name === 'disabled') {
       this.__delegateDisabled();
     }
+
+    if (name === 'disabled' || name === 'readOnly') {
+      this.__toggleInvokerDisabled();
+    }
   }
 
   /**
    * TODO: [delegation of disabled] move this to LionField (or FormControl) level
    */
   __delegateDisabled() {
-    if (this.delegations.target()) {
-      this.delegations.target().disabled = this.disabled;
+    if (this.inputElement) {
+      this.inputElement.disabled = this.disabled;
     }
+  }
+
+  __toggleInvokerDisabled() {
     if (this._invokerElement) {
-      this._invokerElement.disabled = this.disabled;
+      this._invokerElement.disabled = this.disabled || this.readOnly;
     }
   }
 
@@ -220,6 +228,7 @@ export class LionInputDatepicker extends LionInputDate {
   firstUpdated(c) {
     super.firstUpdated(c);
     this.__delegateDisabled();
+    this.__toggleInvokerDisabled();
   }
 
   /**

packages/input-datepicker/stories/index.stories.js

@@ -49,6 +49,17 @@ storiesOf('Forms|Input Datepicker', module)
   .add(
     'Disabled',
     () => html`
-      <lion-input-datepicker disabled></lion-input-datepicker>
+      <lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
+    `,
+  )
+  .add(
+    'Readonly',
+    () => html`
+      <lion-input-datepicker
+        help-text="Notice that it's not possible to open the calendar on readonly inputs"
+        label="Readonly"
+        readonly
+        .modelValue="${new Date()}"
+      ></lion-input-datepicker>
     `,
   );

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -128,6 +128,22 @@ describe('<lion-input-datepicker>', () => {
       expect(elObj.overlayController.isShown).to.equal(false);
       await elObj.openCalendar();
       expect(elObj.overlayController.isShown).to.equal(false);
+      el.disabled = false;
+      await elObj.openCalendar();
+      expect(elObj.overlayController.isShown).to.equal(true);
+    });
+
+    it('disables invoker when host input is readonly', async () => {
+      const el = await fixture(html`
+        <lion-input-datepicker readonly></lion-input-datepicker>
+      `);
+      const elObj = new DatepickerInputObject(el);
+      expect(elObj.overlayController.isShown).to.equal(false);
+      await elObj.openCalendar();
+      expect(elObj.overlayController.isShown).to.equal(false);
+      el.readOnly = false;
+      await elObj.openCalendar();
+      expect(elObj.overlayController.isShown).to.equal(true);
     });
   });
 

packages/input/src/LionInput.js

@@ -7,12 +7,21 @@ import { LionField } from '@lion/field';
  * @extends LionField
  */
 export class LionInput extends LionField {
-  get delegations() {
+  static get properties() {
     return {
-      ...super.delegations,
-      target: () => this.inputElement,
-      properties: [...super.delegations.properties, 'readOnly'],
-      attributes: [...super.delegations.attributes, 'readonly'],
+      ...super.properties,
+      /**
+       * A Boolean attribute which, if present, indicates that the user should not be able to edit
+       * the value of the input. The difference between disabled and readonly is that read-only
+       * controls can still function, whereas disabled controls generally do not function as
+       * controls until they are enabled.
+       *
+       * (From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+       */
+      readOnly: {
+        type: Boolean,
+        attribute: 'readonly',
+      },
     };
   }
 
@@ -30,4 +39,22 @@ export class LionInput extends LionField {
       },
     };
   }
+
+  _requestUpdate(name, oldValue) {
+    super._requestUpdate(name, oldValue);
+    if (name === 'readOnly') {
+      this.__delegateReadOnly();
+    }
+  }
+
+  firstUpdated(c) {
+    super.firstUpdated(c);
+    this.__delegateReadOnly();
+  }
+
+  __delegateReadOnly() {
+    if (this.inputElement) {
+      this.inputElement.readOnly = this.readOnly;
+    }
+  }
 }