From 9d48ad61e048bfd01e3cd552133181a3d2e05e77 Mon Sep 17 00:00:00 2001 From: Anton Platonov Date: Wed, 12 Jun 2019 20:53:39 +0300 Subject: [PATCH] feat: dispatch iron-resize event to notify for height changes Fixes #372 --- src/vaadin-text-area.html | 10 +--- src/vaadin-text-field-mixin.html | 33 ++++++++++- test/text-field.html | 53 ++++++++++++++++++ .../text-area-rtl-material/rtl/chrome.png | Bin 3341 -> 3353 bytes 4 files changed, 86 insertions(+), 10 deletions(-) diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html index c6e8c2b6..480187ea 100644 --- a/src/vaadin-text-area.html +++ b/src/vaadin-text-area.html @@ -192,15 +192,7 @@ inputField.style.removeProperty('display'); inputField.scrollTop = scrollTop; - if (this.__previousInputHeight && this.__previousInputHeight !== inputHeight) { - this.dispatchEvent( - new CustomEvent('iron-resize', { - bubbles: true - }) - ); - } - - this.__previousInputHeight = inputHeight; + this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight); } /** diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html index 273319cc..1e5aede9 100644 --- a/src/vaadin-text-field-mixin.html +++ b/src/vaadin-text-field-mixin.html @@ -318,7 +318,9 @@ '_hostPropsChanged(' + HOST_PROPS.default.join(', ') + ')', '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')', '_getActiveErrorId(invalid, errorMessage, _errorId)', - '_getActiveLabelId(label, _labelId)']; + '_getActiveLabelId(label, _labelId)', + '__observeOffsetHeight(errorMessage, invalid, label)' + ]; } get focusElement() { @@ -560,6 +562,13 @@ var uniqueId = Vaadin.TextFieldMixin._uniqueId = 1 + Vaadin.TextFieldMixin._uniqueId || 0; this._errorId = `${this.constructor.is}-error-${uniqueId}`; this._labelId = `${this.constructor.is}-label-${uniqueId}`; + + // Lumo theme defines a max-height transition for the "error-message" + // part on invalid state change. + this.shadowRoot.querySelector('[part="error-message"]') + .addEventListener('transitionend', () => { + this.__observeOffsetHeight(); + }); } /** @@ -660,6 +669,22 @@ return (!(errorMessage && invalid ? errorId : undefined)).toString(); } + _dispatchIronResizeEventIfNeeded(sizePropertyName, value) { + const previousSizePropertyName = '__previous' + sizePropertyName; + if (this[previousSizePropertyName] !== undefined + && this[previousSizePropertyName] !== value) { + this.dispatchEvent( + new CustomEvent('iron-resize', {bubbles: true}) + ); + } + + this[previousSizePropertyName] = value; + } + + __observeOffsetHeight() { + this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight); + } + /** * @protected */ @@ -697,5 +722,11 @@ * * @event input */ + + /** + * Fired when the size of the element changes. + * + * @event iron-resize + */ }; diff --git a/test/text-field.html b/test/text-field.html index cee3f081..75799d67 100644 --- a/test/text-field.html +++ b/test/text-field.html @@ -481,6 +481,59 @@ textField.clear(); expect(textField.inputElement.value).to.equal(''); }); + + describe(`resize notification ${condition}`, () => { + let textField, spy; + + beforeEach(() => { + textField = fixture(`default${fixtureName}`); + spy = sinon.spy(); + textField.addEventListener('iron-resize', spy); + }); + + it('should not dispatch `iron-resize` event on init', () => { + expect(spy).to.not.be.called; + }); + + it('should dispatch `iron-resize` event on invalid height change', done => { + // Lumo theme defines a max-height transition for the "error-message" + // part on invalid state change. + + // NOTE(platosha): Transition events are unreilable, IE skips + // the transition sometimes, Safari does not fire anything but + // 'transitionend', so transitions are hard to detect properly. + // Have to use a timeout here and in the next test instead. + setTimeout(() => { + expect(spy).to.be.called; + done(); + }, 1000); + + textField.errorMessage = 'Error'; + textField.invalid = true; + }); + + it('should dispatch `iron-resize` event on error message height change', done => { + // Lumo theme defines a max-height transition for the "error-message" + // part on invalid state change. + setTimeout(() => { + spy.reset(); + + // Long message that spans on multiple lines + textField.errorMessage = [...new Array(42)].map(() => 'bla').join(' '); + + expect(spy).to.be.calledOnce; + done(); + }, 1000); + + textField.errorMessage = 'Error'; + textField.invalid = true; + }); + + it('should dispatch `iron-resize` event on label height change', () => { + textField.label = 'Label'; + expect(spy).to.be.calledOnce; + }); + }); }); }); diff --git a/test/visual/screens/vaadin-text-field/text-area-rtl-material/rtl/chrome.png b/test/visual/screens/vaadin-text-field/text-area-rtl-material/rtl/chrome.png index 12747e447d10216f4a1f48c1de6603ac156c8956..e4f8b164022b4a87c485f0e8ce41858c4e0bdc96 100644 GIT binary patch delta 2740 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 delta 2732 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 m9}DottE{fBYVrrb>-B4SWP