From a847f99388d1dd671aefe08e1ff2ff4f4f232c1e Mon Sep 17 00:00:00 2001 From: gerjanvangeest Date: Wed, 6 Mar 2024 10:07:06 +0100 Subject: [PATCH] fix(textarea): fix box-sizing inside tests to make it work cross browser (#2210) --- .changeset/fifty-ants-end.md | 5 ++++ package-lock.json | 13 +++++++++++ package.json | 1 + .../components/textarea/src/LionTextarea.js | 4 ++-- .../textarea/test/lion-textarea.test.js | 23 +++++-------------- packages/ui/package.json | 2 +- 6 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 .changeset/fifty-ants-end.md diff --git a/.changeset/fifty-ants-end.md b/.changeset/fifty-ants-end.md new file mode 100644 index 000000000..216aac281 --- /dev/null +++ b/.changeset/fifty-ants-end.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[textarea] set box-sizing in tests to make it work cross browser diff --git a/package-lock.json b/package-lock.json index b278f3967..be7df30e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@rocket/cli": "^0.10.2", "@rocket/launch": "^0.6.0", "@rocket/search": "^0.5.1", + "@types/autosize": "^4.0.3", "@types/chai-as-promised": "^7.1.5", "@types/chai-dom": "^0.0.8", "@types/convert-source-map": "^1.5.2", @@ -4220,6 +4221,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/autosize": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz", + "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==", + "dev": true + }, "node_modules/@types/babel__code-frame": { "version": "7.0.3", "dev": true, @@ -24201,6 +24208,12 @@ "version": "5.0.1", "dev": true }, + "@types/autosize": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz", + "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==", + "dev": true + }, "@types/babel__code-frame": { "version": "7.0.3", "dev": true diff --git a/package.json b/package.json index f7fb4d29a..8d9e5bb12 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@rocket/cli": "^0.10.2", "@rocket/launch": "^0.6.0", "@rocket/search": "^0.5.1", + "@types/autosize": "^4.0.3", "@types/chai-as-promised": "^7.1.5", "@types/chai-dom": "^0.0.8", "@types/convert-source-map": "^1.5.2", diff --git a/packages/ui/components/textarea/src/LionTextarea.js b/packages/ui/components/textarea/src/LionTextarea.js index 36ab4f94a..c4a771232 100644 --- a/packages/ui/components/textarea/src/LionTextarea.js +++ b/packages/ui/components/textarea/src/LionTextarea.js @@ -1,6 +1,5 @@ /* eslint-disable max-classes-per-file */ -// @ts-expect-error [external]: https://github.com/jackmoore/autosize/pull/384 wait for this, then we can switch to just 'autosize'; and then types will work! -import autosize from 'autosize/src/autosize.js'; +import autosize from 'autosize'; import { LionField, NativeTextFieldMixin } from '@lion/ui/form-core.js'; import { css } from 'lit'; @@ -155,6 +154,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) { ...super.styles, css` .input-group__container > .input-group__input ::slotted(.form-control) { + box-sizing: content-box; overflow-x: hidden; /* for FF adds height to the TextArea to reserve place for scroll-bars */ } diff --git a/packages/ui/components/textarea/test/lion-textarea.test.js b/packages/ui/components/textarea/test/lion-textarea.test.js index c41e01772..0c505db46 100644 --- a/packages/ui/components/textarea/test/lion-textarea.test.js +++ b/packages/ui/components/textarea/test/lion-textarea.test.js @@ -12,11 +12,6 @@ import '@lion/ui/define/lion-textarea.js'; const fixture = /** @type {(arg: TemplateResult|string) => Promise} */ (_fixture); -const isFirefox = (() => { - const ua = navigator.userAgent.toLowerCase(); - return ua.indexOf('firefox') !== -1 && ua.indexOf('safari') === -1 && ua.indexOf('chrome') === -1; -})(); - function hasBrowserResizeSupport() { const textarea = document.createElement('textarea'); return textarea.style.resize !== undefined; @@ -98,10 +93,9 @@ describe('', () => { expect(hightWith1Line < hightWith5TextLines).to.equal(true); }); - // TODO: To be fixed in 4096171 - it.skip(`starts growing when content is bigger than "rows" + it(`starts growing when content is bigger than "rows" 'and stops growing after property "maxRows" is reached`, async () => { - const el = await fixture(``); + const el = await fixture(html``); return [1, 2, 3, 4, 5, 6, 7, 8].reduce(async (heightPromise, i) => { const oldHeight = await heightPromise; el.modelValue += '\n'; @@ -120,11 +114,9 @@ describe('', () => { }, Promise.resolve(0)); }); - // TODO: make test simpler => no reduce please (also update autosize npm dependency to latest version) - // TODO: To be fixed in 4096171 - it.skip('stops growing after property "maxRows" is reached when there was an initial value', async () => { - const el = await fixture(html``); - + // TODO: make test simpler => no reduce please + it('stops growing after property "maxRows" is reached when there was an initial value', async () => { + const el = await fixture(html` `); return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => { const oldHeight = await heightPromise; el.modelValue += `\n`; @@ -133,10 +125,7 @@ describe('', () => { if (i > el.maxRows) { // stop growing - // TODO: fails on Firefox => fix it - if (!isFirefox) { - expect(newHeight).to.equal(oldHeight); - } + expect(newHeight).to.equal(oldHeight); } else if (i > el.rows) { // growing normally expect(newHeight >= oldHeight).to.equal(true); diff --git a/packages/ui/package.json b/packages/ui/package.json index 2320a2ea6..3e567519d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -65,7 +65,7 @@ "@open-wc/dedupe-mixin": "^1.4.0", "@open-wc/scoped-elements": "^3.0.5", "@popperjs/core": "^2.11.8", - "autosize": "^6.0.1", + "autosize": "^6.0.0", "awesome-phonenumber": "^6.4.0", "ibantools": "^4.3.9", "lit": "^3.1.2",