Merge pull request #350 from ing-bank/dev

Bunch of fixes bundled into one

packages/field/src/FormRegisteringMixin.js

@@ -13,6 +13,11 @@ export const FormRegisteringMixin = dedupeMixin(
   superclass =>
     // eslint-disable-next-line no-shadow, no-unused-vars
     class FormRegisteringMixin extends superclass {
+      constructor() {
+        super();
+        this.__boundDispatchRegistration = this._dispatchRegistration.bind(this);
+      }
+
       connectedCallback() {
         if (super.connectedCallback) {
           super.connectedCallback();
@@ -31,9 +36,10 @@ export const FormRegisteringMixin = dedupeMixin(
         if (formRegistrarManager.ready) {
           this._dispatchRegistration();
         } else {
-          formRegistrarManager.addEventListener('all-forms-open-for-registration', () => {
-            this._dispatchRegistration();
-          });
+          formRegistrarManager.addEventListener(
+            'all-forms-open-for-registration',
+            this.__boundDispatchRegistration,
+          );
         }
       }
 
@@ -44,6 +50,10 @@ export const FormRegisteringMixin = dedupeMixin(
             bubbles: true,
           }),
         );
+        formRegistrarManager.removeEventListener(
+          'all-forms-open-for-registration',
+          this.__boundDispatchRegistration,
+        );
       }
 
       _unregisterFormElement() {

packages/input/src/LionInput.js

@@ -20,6 +20,7 @@ export class LionInput extends LionField {
       readOnly: {
         type: Boolean,
         attribute: 'readonly',
+        reflect: true,
       },
       type: {
         type: String,

packages/overlays/src/OverlayController.js

@@ -26,7 +26,7 @@ export class OverlayController {
       invokerNode: config.invokerNode,
       referenceNode: null,
       elementToFocusAfterHide: document.body,
-      inheritsReferenceWidth: 'min',
+      inheritsReferenceWidth: '',
       hasBackdrop: false,
       isBlocking: false,
       preventsScroll: false,
@@ -498,8 +498,10 @@ export class OverlayController {
       case 'full':
         this._contentNodeWrapper.style.width = referenceWidth;
         break;
-      default:
+      case 'min':
         this._contentNodeWrapper.style.minWidth = referenceWidth;
+        break;
+      /* no default */
     }
   }
 

packages/overlays/test/local-positioning.test.js

@@ -202,14 +202,14 @@ describe('Local Positioning', () => {
       `);
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -28px, 0px)',
+        'translate3d(10px, -28px, 0px)',
         'Popper positioning values',
       );
 
       await ctrl.hide();
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -28px, 0px)',
+        'translate3d(10px, -28px, 0px)',
         'Popper positioning values should be identical after hiding and showing',
       );
     });
@@ -242,7 +242,7 @@ describe('Local Positioning', () => {
 
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -30px, 0px)',
+        'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
 
@@ -258,7 +258,7 @@ describe('Local Positioning', () => {
       await ctrl.show();
       expect(ctrl._popper.options.modifiers.offset.offset).to.equal('0, 20px');
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -40px, 0px)',
+        'translate3d(10px, -40px, 0px)',
         'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
     });
@@ -292,7 +292,7 @@ describe('Local Positioning', () => {
 
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -30px, 0px)',
+        'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
 
@@ -305,7 +305,7 @@ describe('Local Positioning', () => {
         },
       });
       expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate3d(0px, -40px, 0px)',
+        'translate3d(10px, -40px, 0px)',
         'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
     });

packages/textarea/src/LionTextarea.js

@@ -19,6 +19,11 @@ export class LionTextarea extends LionField {
         type: Number,
         reflect: true,
       },
+      readOnly: {
+        type: Boolean,
+        attribute: 'readonly',
+        reflect: true,
+      },
     };
   }
 
@@ -42,6 +47,7 @@ export class LionTextarea extends LionField {
     super();
     this.rows = 2;
     this.maxRows = 6;
+    this.readOnly = false;
   }
 
   connectedCallback() {
@@ -63,6 +69,13 @@ export class LionTextarea extends LionField {
       }
     }
 
+    if (changedProperties.has('readOnly')) {
+      const native = this.inputElement;
+      if (native) {
+        native.readOnly = this.readOnly;
+      }
+    }
+
     if (changedProperties.has('modelValue')) {
       this.resizeTextarea();
     }

packages/textarea/test/lion-textarea.test.js

@@ -22,12 +22,14 @@ describe('<lion-textarea>', () => {
     expect(el.maxRows).to.equal(6);
   });
 
-  it('has .rows=2 and rows="2" by default', async () => {
+  it('has .readOnly=false .rows=2 and rows="2" by default', async () => {
     const el = await fixture(`<lion-textarea>foo</lion-textarea>`);
     expect(el.rows).to.equal(2);
     expect(el.getAttribute('rows')).to.be.equal('2');
     expect(el.inputElement.rows).to.equal(2);
     expect(el.inputElement.getAttribute('rows')).to.be.equal('2');
+    expect(el.readOnly).to.be.false;
+    expect(el.inputElement.hasAttribute('readonly')).to.be.false;
   });
 
   it('sync rows down to the native textarea', async () => {
@@ -38,6 +40,12 @@ describe('<lion-textarea>', () => {
     expect(el.inputElement.getAttribute('rows')).to.be.equal('8');
   });
 
+  it('sync readOnly to the native textarea', async () => {
+    const el = await fixture(`<lion-textarea readonly>foo</lion-textarea>`);
+    expect(el.readOnly).to.be.true;
+    expect(el.querySelector('textarea').readOnly).to.be.true;
+  });
+
   it('disables user resize behavior', async () => {
     if (!hasBrowserResizeSupport()) {
       return;