refactor: remove iron-resize event from field-mixin

packages/field-base/src/field-mixin.js

@@ -4,9 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { FieldAriaController } from './field-aria-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
@@ -69,7 +67,6 @@ export const FieldMixin = (superclass) =>
 
     static get observers() {
       return [
-        '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
         '_updateErrorMessage(invalid, errorMessage)',
         '_invalidChanged(invalid)',
         '_requiredChanged(required)',
@@ -243,31 +240,6 @@ export const FieldMixin = (superclass) =>
       this.toggleAttribute('has-helper', hasHelper);
     }
 
-    /**
-     * Dispatch an event if a specific size measurement property has changed.
-     * Supporting multiple properties here is needed for `vaadin-text-area`.
-     * @protected
-     */
-    _dispatchIronResizeEventIfNeeded(prop, value) {
-      const oldSize = '__old' + prop;
-      if (this[oldSize] !== undefined && this[oldSize] !== value) {
-        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true, composed: true }));
-      }
-
-      this[oldSize] = value;
-    }
-
-    /** @private */
-    __observeOffsetHeight() {
-      this.__observeOffsetHeightDebouncer = Debouncer.debounce(
-        this.__observeOffsetHeightDebouncer,
-        animationFrame,
-        () => {
-          this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
-        }
-      );
-    }
-
     /**
      * @protected
      * @override

packages/field-base/test/field-mixin.test.js

@@ -1,6 +1,5 @@
 import { expect } from '@esm-bundle/chai';
 import { aTimeout, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
-import sinon from 'sinon';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { FieldMixin } from '../src/field-mixin.js';
 import { InputController } from '../src/input-controller.js';
@@ -711,60 +710,4 @@ describe('field-mixin', () => {
       expect(input.getAttribute('aria-describedby')).to.include(helper.id);
     });
   });
-
-  describe('iron-resize', () => {
-    let spy;
-
-    function flushObserveHeight(field) {
-      field.__observeOffsetHeightDebouncer.flush();
-    }
-
-    beforeEach(() => {
-      element = fixtureSync('<field-mixin-element></field-mixin-element>');
-      spy = sinon.spy();
-      element.addEventListener('iron-resize', spy);
-    });
-
-    it('should not dispatch `iron-resize` event on init', () => {
-      expect(spy.called).to.be.false;
-    });
-
-    it('should dispatch `iron-resize` event on invalid height change', () => {
-      element.errorMessage = 'Error';
-      flushObserveHeight(element);
-      element.invalid = true;
-      flushObserveHeight(element);
-      expect(spy.called).to.be.true;
-    });
-
-    it('should be a composed event', () => {
-      element.errorMessage = 'Error';
-      flushObserveHeight(element);
-      element.invalid = true;
-      flushObserveHeight(element);
-      const event = spy.lastCall.lastArg;
-      expect(event.composed).to.be.true;
-    });
-
-    it('should dispatch `iron-resize` event on error message height change', () => {
-      element.errorMessage = 'Error';
-      flushObserveHeight(element);
-      element.invalid = true;
-      flushObserveHeight(element);
-      spy.resetHistory();
-
-      // Long message that spans on multiple lines
-      element.errorMessage = [...new Array(42)].map(() => 'bla').join(' ');
-      flushObserveHeight(element);
-
-      expect(spy.calledOnce).to.be.true;
-    });
-
-    it('should dispatch `iron-resize` event on label height change', () => {
-      flushObserveHeight(element);
-      element.label = 'Label';
-      flushObserveHeight(element);
-      expect(spy.calledOnce).to.be.true;
-    });
-  });
 });

packages/text-area/src/vaadin-text-area.js

@@ -278,8 +278,6 @@ export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(Element
     inputField.style.removeProperty('display');
     inputField.style.removeProperty('height');
     inputField.scrollTop = scrollTop;
-
-    this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight);
   }
 
   /**

packages/text-area/test/text-area.test.js

@@ -342,36 +342,6 @@ describe('text-area', () => {
     });
   });
 
-  describe('resize', () => {
-    let spy;
-
-    beforeEach(() => {
-      spy = sinon.spy();
-      textArea.addEventListener('iron-resize', spy);
-    });
-
-    it('should not dispatch `iron-resize` event on init', () => {
-      expect(spy.callCount).to.equal(0);
-    });
-
-    it('should dispatch `iron-resize` event on height change', () => {
-      textArea.value = `
-        there
-        should
-        be
-        a
-        lot
-        of
-        rows`;
-      expect(spy.callCount).to.equal(1);
-    });
-
-    it('should not dispatch `iron-resize` event on value change if height did not change', () => {
-      textArea.value = 'just 1 row';
-      expect(spy.callCount).to.equal(0);
-    });
-  });
-
   describe('pattern', () => {
     // https://github.com/web-platform-tests/wpt/blob/7b0ebaccc62b566a1965396e5be7bb2bc06f841f/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html
 

packages/text-field/test/text-field.test.js

@@ -388,61 +388,6 @@ describe('text-field', () => {
     });
   });
 
-  describe('resize notification', () => {
-    let spy;
-
-    function flushTextField(textField) {
-      textField.__observeOffsetHeightDebouncer.flush();
-    }
-
-    beforeEach(() => {
-      spy = sinon.spy();
-      textField.addEventListener('iron-resize', spy);
-    });
-
-    it('should not dispatch `iron-resize` event on init', () => {
-      expect(spy.called).to.be.false;
-    });
-
-    it('should dispatch `iron-resize` event on invalid height change', () => {
-      textField.errorMessage = 'Error';
-      flushTextField(textField);
-      textField.invalid = true;
-      flushTextField(textField);
-      expect(spy.called).to.be.true;
-    });
-
-    it('should be a composed event', () => {
-      textField.errorMessage = 'Error';
-      flushTextField(textField);
-      textField.invalid = true;
-      flushTextField(textField);
-      const event = spy.lastCall.lastArg;
-      expect(event.composed).to.be.true;
-    });
-
-    it('should dispatch `iron-resize` event on error message height change', () => {
-      textField.errorMessage = 'Error';
-      flushTextField(textField);
-      textField.invalid = true;
-      flushTextField(textField);
-      spy.resetHistory();
-
-      // Long message that spans on multiple lines
-      textField.errorMessage = [...new Array(42)].map(() => 'bla').join(' ');
-      flushTextField(textField);
-
-      expect(spy.calledOnce).to.be.true;
-    });
-
-    it('should dispatch `iron-resize` event on label height change', () => {
-      flushTextField(textField);
-      textField.label = 'Label';
-      flushTextField(textField);
-      expect(spy.calledOnce).to.be.true;
-    });
-  });
-
   describe('theme attribute', () => {
     it('should propagate theme attribute to input container', () => {
       const container = textField.shadowRoot.querySelector('[part="input-field"]');