From 70754b06e6c8f03f8cffa5de85a248720f4dfa09 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 2 Sep 2025 19:57:21 +0330 Subject: [PATCH 1/2] fix(file-input): resolve preview section re-render issues --- .../src/file-input/file-input.ts | 31 +++++++++---------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/web-components/src/file-input/file-input.ts b/packages/web-components/src/file-input/file-input.ts index 9431939f..b3d50ea1 100644 --- a/packages/web-components/src/file-input/file-input.ts +++ b/packages/web-components/src/file-input/file-input.ts @@ -314,9 +314,6 @@ export class FileInput extends BaseClass { @state() private _nativeError = false; - @state() - private _previewSrc: null | string = null; - @state() private _nativeErrorText = ""; @@ -404,11 +401,7 @@ export class FileInput extends BaseClass { private _handleInput() { if (!this._isInteractable) return; - const file = this.files?.[0]; - - if (file) { - this._previewSrc = URL.createObjectURL(file); - } else this._previewSrc = null; + this.requestUpdate(); } private _handleChange(event: Event) { @@ -441,8 +434,6 @@ export class FileInput extends BaseClass { input.files = files; - this._previewSrc = URL.createObjectURL(files[0]!); - this.dispatchEvent(new Event("change", { bubbles: true })); this.dispatchEvent(new Event("input", { bubbles: true, composed: true })); } @@ -558,11 +549,13 @@ export class FileInput extends BaseClass { public reset(): void { if (this._input) { this._input.value = ""; + this._input.files = null; } - this._previewSrc = null; this._nativeError = false; this._nativeErrorText = ""; + + this.requestUpdate(); } private _getErrorText() { @@ -649,14 +642,18 @@ export class FileInput extends BaseClass { } private _renderPreview() { - if (!this.files) return null; + const files = this.files; + + if (!files) return null; + + if (files.length === 1) { + const file = files[0]!; - if (this.files.length === 1) { - const file = this.files[0]!; + if (isFileImage(file.name)) { + const previewSrc = URL.createObjectURL(file); - if (isFileImage(file.name) && this._previewSrc) { return html`preview${toFaNumber(this.files.length.toString())} فایل انتخاب شده${toFaNumber(files.length.toString())} فایل انتخاب شده`; } From efbfb961e23b55526c84ba2709c8d3e044a8e243 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 2 Sep 2025 20:01:34 +0330 Subject: [PATCH 2/2] docs: update changeset --- .changeset/rare-jobs-play.md | 6 +++++ packages/web-components/CHANGELOG.md | 34 ++++++++++++++-------------- 2 files changed, 23 insertions(+), 17 deletions(-) create mode 100644 .changeset/rare-jobs-play.md diff --git a/.changeset/rare-jobs-play.md b/.changeset/rare-jobs-play.md new file mode 100644 index 00000000..26ff11db --- /dev/null +++ b/.changeset/rare-jobs-play.md @@ -0,0 +1,6 @@ +--- +"@tapsioss/web-components": patch +--- + +Resolve file input's preview section re-render issues. + \ No newline at end of file diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index 286f7391..0b05cc9e 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -5,11 +5,11 @@ -- [`1d78185`](https://github.com/Tap30/web-components/commit/1d781852c2ab35cf9de8cc49b40a64d6141b7d74) Thanks [@mimshins](https://github.com/mimshins)! - Update button styles +- [`1d78185`](https://github.com/Tap30/web-components/commit/1d781852c2ab35cf9de8cc49b40a64d6141b7d74) Thanks [@mimshins](https://github.com/mimshins)! - Update button styles. -- [`33d0dfa`](https://github.com/Tap30/web-components/commit/33d0dfa7aeb157cfb7478fd4e0c6d2723ac6a2d8) Thanks [@mimshins](https://github.com/mimshins)! - Update discount card styles +- [`33d0dfa`](https://github.com/Tap30/web-components/commit/33d0dfa7aeb157cfb7478fd4e0c6d2723ac6a2d8) Thanks [@mimshins](https://github.com/mimshins)! - Update discount card styles. ## 0.17.3 ### Patch Changes @@ -35,96 +35,96 @@ -- [#495](https://github.com/Tap30/web-components/pull/495) [`ec68346`](https://github.com/Tap30/web-components/commit/ec68346ab16d15c04fdc2213b2fd8776cbfcc0f6) Thanks [@mimshins](https://github.com/mimshins)! - Resolve issues with stacking context layers in button +- [#495](https://github.com/Tap30/web-components/pull/495) [`ec68346`](https://github.com/Tap30/web-components/commit/ec68346ab16d15c04fdc2213b2fd8776cbfcc0f6) Thanks [@mimshins](https://github.com/mimshins)! - Resolve issues with stacking context layers in button. ## 0.17.1 ### Patch Changes -- [#491](https://github.com/Tap30/web-components/pull/491) [`61c768d`](https://github.com/Tap30/web-components/commit/61c768d65b222d98544aaf6a7784f4b65c5adea0) Thanks [@mimshins](https://github.com/mimshins)! - Improve selection controllers to take their parents into account +- [#491](https://github.com/Tap30/web-components/pull/491) [`61c768d`](https://github.com/Tap30/web-components/commit/61c768d65b222d98544aaf6a7784f4b65c5adea0) Thanks [@mimshins](https://github.com/mimshins)! - Improve selection controllers to take their parents into account. ## 0.17.0 ### Minor Changes -- [#488](https://github.com/Tap30/web-components/pull/488) [`fa0ea8c`](https://github.com/Tap30/web-components/commit/fa0ea8cc4b5f49a0181bcaba61ce2ad873b78898) Thanks [@mimshins](https://github.com/mimshins)! - Remove unnecessary `reflect` behaviors +- [#488](https://github.com/Tap30/web-components/pull/488) [`fa0ea8c`](https://github.com/Tap30/web-components/commit/fa0ea8cc4b5f49a0181bcaba61ce2ad873b78898) Thanks [@mimshins](https://github.com/mimshins)! - Remove unnecessary `reflect` behaviors. -- [#485](https://github.com/Tap30/web-components/pull/485) [`ccf32c4`](https://github.com/Tap30/web-components/commit/ccf32c462726b4a70b604d3008bd5078bc212fd3) Thanks [@mimshins](https://github.com/mimshins)! - Update `value` property to be readonly in pinwheel +- [#485](https://github.com/Tap30/web-components/pull/485) [`ccf32c4`](https://github.com/Tap30/web-components/commit/ccf32c462726b4a70b604d3008bd5078bc212fd3) Thanks [@mimshins](https://github.com/mimshins)! - Update `value` property to be readonly in pinwheel. ### Patch Changes -- [#486](https://github.com/Tap30/web-components/pull/486) [`76bb65f`](https://github.com/Tap30/web-components/commit/76bb65f9354f7877863d916bbca99b055a58b448) Thanks [@mimshins](https://github.com/mimshins)! - Remove iOS-specific behaviors for scroll locker +- [#486](https://github.com/Tap30/web-components/pull/486) [`76bb65f`](https://github.com/Tap30/web-components/commit/76bb65f9354f7877863d916bbca99b055a58b448) Thanks [@mimshins](https://github.com/mimshins)! - Remove iOS-specific behaviors for scroll locker. -- [#489](https://github.com/Tap30/web-components/pull/489) [`43ee3d2`](https://github.com/Tap30/web-components/commit/43ee3d25c173209b716c525cfb4f917af36907c7) Thanks [@mimshins](https://github.com/mimshins)! - Forward necessary host click events to root elements +- [#489](https://github.com/Tap30/web-components/pull/489) [`43ee3d2`](https://github.com/Tap30/web-components/commit/43ee3d25c173209b716c525cfb4f917af36907c7) Thanks [@mimshins](https://github.com/mimshins)! - Forward necessary host click events to root elements. ## 0.16.0 ### Minor Changes -- [#476](https://github.com/Tap30/web-components/pull/476) [`420924b`](https://github.com/Tap30/web-components/commit/420924bed71a6e4efa55a4f3a21dfdd445f0f262) Thanks [@amir78729](https://github.com/amir78729)! - Expose file input's clear event +- [#476](https://github.com/Tap30/web-components/pull/476) [`420924b`](https://github.com/Tap30/web-components/commit/420924bed71a6e4efa55a4f3a21dfdd445f0f262) Thanks [@amir78729](https://github.com/amir78729)! - Expose file input's clear event. ### Patch Changes -- [#478](https://github.com/Tap30/web-components/pull/478) [`4b62a11`](https://github.com/Tap30/web-components/commit/4b62a1145f65e081cc332497edb9689c44baf120) Thanks [@mimshins](https://github.com/mimshins)! - Fix issues with syncing height in auto-resizable mode in text-area +- [#478](https://github.com/Tap30/web-components/pull/478) [`4b62a11`](https://github.com/Tap30/web-components/commit/4b62a1145f65e081cc332497edb9689c44baf120) Thanks [@mimshins](https://github.com/mimshins)! - Fix issues with syncing height in auto-resizable mode in text-area. ## 0.15.0 ### Minor Changes -- [#474](https://github.com/Tap30/web-components/pull/474) [`1f4b1e3`](https://github.com/Tap30/web-components/commit/1f4b1e3c8d3d4a4c21f934dc4f6f5a06d00d6e67) Thanks [@mimshins](https://github.com/mimshins)! - Add auto-resize feature to text-area component +- [#474](https://github.com/Tap30/web-components/pull/474) [`1f4b1e3`](https://github.com/Tap30/web-components/commit/1f4b1e3c8d3d4a4c21f934dc4f6f5a06d00d6e67) Thanks [@mimshins](https://github.com/mimshins)! - Add auto-resize feature to text-area component. ## 0.14.0 ### Minor Changes -- [#472](https://github.com/Tap30/web-components/pull/472) [`ba17f66`](https://github.com/Tap30/web-components/commit/ba17f66db91a2cd90191cbde14864fe47463b52c) Thanks [@mimshins](https://github.com/mimshins)! - Remove cjs exports +- [#472](https://github.com/Tap30/web-components/pull/472) [`ba17f66`](https://github.com/Tap30/web-components/commit/ba17f66db91a2cd90191cbde14864fe47463b52c) Thanks [@mimshins](https://github.com/mimshins)! - Remove cjs exports. -- [#462](https://github.com/Tap30/web-components/pull/462) [`e4906fe`](https://github.com/Tap30/web-components/commit/e4906fe2e461be2d0fa525f8e7292a84927bf565) Thanks [@hossein-nas](https://github.com/hossein-nas)! - Add discount card component +- [#462](https://github.com/Tap30/web-components/pull/462) [`e4906fe`](https://github.com/Tap30/web-components/commit/e4906fe2e461be2d0fa525f8e7292a84927bf565) Thanks [@hossein-nas](https://github.com/hossein-nas)! - Add discount card component. ### Patch Changes -- [#468](https://github.com/Tap30/web-components/pull/468) [`ecc07f6`](https://github.com/Tap30/web-components/commit/ecc07f6cf773a995dade9b3571e752bab57856f0) Thanks [@amir78729](https://github.com/amir78729)! - Resolve tooltip size issue +- [#468](https://github.com/Tap30/web-components/pull/468) [`ecc07f6`](https://github.com/Tap30/web-components/commit/ecc07f6cf773a995dade9b3571e752bab57856f0) Thanks [@amir78729](https://github.com/amir78729)! - Resolve tooltip size issue. ## 0.13.1 ### Patch Changes -- [`e7cdebf`](https://github.com/Tap30/web-components/commit/e7cdebf48f26dfecef97c180b97f65362a7336e3) Thanks [@mimshins](https://github.com/mimshins)! - Fix endpoints of the 'esm' exports +- [`e7cdebf`](https://github.com/Tap30/web-components/commit/e7cdebf48f26dfecef97c180b97f65362a7336e3) Thanks [@mimshins](https://github.com/mimshins)! - Fix endpoints of the 'esm' exports. ## 0.13.0 ### Minor Changes -- [`eeec57f`](https://github.com/Tap30/web-components/commit/eeec57fcd4a10113b84eb8cda693e35529763e8d) Thanks [@mimshins](https://github.com/mimshins)! - Update build target (es8) and environments (cjs, esm) +- [`eeec57f`](https://github.com/Tap30/web-components/commit/eeec57fcd4a10113b84eb8cda693e35529763e8d) Thanks [@mimshins](https://github.com/mimshins)! - Update build target (es8) and environments (cjs, esm). ## 0.12.3 ### Patch Changes -- [#457](https://github.com/Tap30/web-components/pull/457) [`4f56395`](https://github.com/Tap30/web-components/commit/4f56395039478b65ed9d551ef1eaa71ce352fb5c) Thanks [@mimshins](https://github.com/mimshins)! - Fix: expose `main` and `types` endpoints +- [#457](https://github.com/Tap30/web-components/pull/457) [`4f56395`](https://github.com/Tap30/web-components/commit/4f56395039478b65ed9d551ef1eaa71ce352fb5c) Thanks [@mimshins](https://github.com/mimshins)! - Fix: expose `main` and `types` endpoints.