Fix #327 -- Swith to autonomous custom element for Safari support #357

codingjoe · 2025-12-18T19:24:11Z

Apple decided they don't want to support customized built-in elements,
see also: WebKit/standards-positions#97

Apple decided they don't want to support customized built-in elements, see also: WebKit/standards-positions#97

codecov · 2025-12-18T19:25:07Z

Codecov Report

❌ Patch coverage is 95.45455% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.72%. Comparing base (52cd30b) to head (0140695).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
s3file/forms.py	95.45%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #357      +/-   ##
==========================================
- Coverage   98.19%   97.72%   -0.47%     
==========================================
  Files           8        8              
  Lines         221      264      +43     
==========================================
+ Hits          217      258      +41     
- Misses          4        6       +2

Flag	Coverage Δ
python	`97.72% <95.45%> (-0.47%)`	⬇️
selenium-ubuntu-latest	`80.68% <72.72%> (-1.68%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR switches from customized built-in elements to autonomous custom elements to add Safari support. Apple has declined to support customized built-in elements (see WebKit standards-positions issue #97), making this change necessary for cross-browser compatibility.

Replaces <input is="s3-file"> with <s3-file> custom element wrapper
Migrates from extending HTMLInputElement to HTMLElement with manual form participation
Updates tests to locate elements by type rather than name, and adjusts CI configuration

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
s3file/static/s3file/js/s3file.js	Refactored S3FileInput from customized built-in to autonomous custom element, extending HTMLElement instead of HTMLInputElement, with added form participation logic and file input properties/methods
s3file/forms.py	Added render method to wrap Django's input HTML with s3-file custom element tags; removed `is="s3-file"` attribute from build_attrs
tests/test_forms.py	Updated test assertions to reflect new DOM structure (hidden input has no name, locate by type not name); added test for s3-file wrapper; increased Selenium timeouts; updated multi-file selector
tests/tests/s3file.test.js	Removed test for `type` property on constructor; updated connectedCallback test to verify internal _fileInput creation instead of event listener mocking
.github/workflows/ci.yml	Removed Chrome installation steps from Selenium test workflow

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

s3file/static/s3file/js/s3file.js

Copilot · 2025-12-18T19:31:18Z

s3file/static/s3file/js/s3file.js

+      this.form.pendingRquests = this.form?.pendingRquests || []
      this.form.pendingRquests.push(this.upload)


Missing optional chaining operator on first access to this.form.pendingRquests. The second access on the same line uses ?. but the first one doesn't. If this.form is null/undefined, this will throw a TypeError. Additionally, pendingRquests appears to be a typo - it should be pendingRequests (note the missing 'e').

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2025-12-18T19:31:18Z

s3file/static/s3file/js/s3file.js

-    await Promise.all(this.form.pendingRquests)
-    this.form.requestSubmit(event.submitter)
+    this.form?.dispatchEvent(new window.CustomEvent("upload"))
+    await Promise.all(this.form?.pendingRquests)


There's a typo in the property name: pendingRquests should be pendingRequests. This appears to be a misspelling that will cause the code to wait on an undefined property, preventing proper form submission.

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2025-12-18T19:31:18Z

s3file/forms.py

+    def render(self, name, value, attrs=None, renderer=None):
+        """Render the widget as a custom element for Safari compatibility."""
+        return mark_safe(  # noqa: S308
+            str(super().render(name, value, attrs=attrs, renderer=renderer)).replace(
+                f'<input type="{self.input_type}"', "<s3-file"
+            )
+        )


The render method replaces the <input type="file" tag with <s3-file using a simple string replacement. This approach is fragile because it relies on the specific format of Django's rendered HTML output. If Django changes its rendering format (e.g., by changing the order of attributes or the spacing), this replacement could break. Consider using a more robust HTML parsing approach or a template-based solution.

@copilot open a new pull request to apply changes based on this feedback

.github/workflows/ci.yml

Copilot · 2025-12-18T19:32:39Z

@codingjoe I've opened a new pull request, #358, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2025-12-18T19:32:54Z

@codingjoe I've opened a new pull request, #359, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2025-12-18T19:33:00Z

@codingjoe I've opened a new pull request, #360, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2025-12-18T19:33:46Z

@codingjoe I've opened a new pull request, #361, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com>

* Initial plan * Replace fragile string replacement with HTML parser for render method Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> * Refactor HTML parser to reduce code duplication and improve documentation Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> * Compress parser code and add comprehensive unit tests Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> * Add test for non-file input with self-closing tag to cover line 52 Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> * Update s3file/forms.py Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Add entity and character reference handlers with comprehensive tests Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> * Add tests for comment, declaration, and processing instruction handlers Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com> Co-authored-by: Johannes Maron <johannes@maron.family> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

for more information, see https://pre-commit.ci

Fix #327 -- Swith to autonomous custom element for Safari support

2218cd3

Apple decided they don't want to support customized built-in elements, see also: WebKit/standards-positions#97

Copilot AI review requested due to automatic review settings December 18, 2025 19:24

codingjoe self-assigned this Dec 18, 2025

Copilot started reviewing on behalf of codingjoe December 18, 2025 19:24 View session

Copilot AI reviewed Dec 18, 2025

View reviewed changes

Copilot AI mentioned this pull request Dec 18, 2025

Add disconnectedCallback to prevent duplicate inputs on DOM reconnection #358

Merged

Copilot AI mentioned this pull request Dec 18, 2025

Fix typo and optional chaining in pendingRequests tracking #359

Closed

Copilot AI mentioned this pull request Dec 18, 2025

Fix typo: pendingRquests → pendingRequests #360

Merged

Copilot AI mentioned this pull request Dec 18, 2025

Replace string replacement with HTML parser in render method #361

Merged

13 tasks

Copilot AI and others added 4 commits December 18, 2025 20:45

Fix typo: pendingRquests → pendingRequests

5715ff8

Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com>

Implement disconnectedCallback and prevent duplicate inputs

2d36f16

Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com>

[pre-commit.ci] auto fixes from pre-commit.com hooks

0140695

for more information, see https://pre-commit.ci

codingjoe merged commit 9aa0b94 into main Dec 18, 2025
13 of 16 checks passed

codingjoe deleted the safari branch December 18, 2025 21:53

		this.form.pendingRquests = this.form?.pendingRquests \|\| []
		this.form.pendingRquests.push(this.upload)

Uh oh!

Fix #327 -- Swith to autonomous custom element for Safari support #357

Fix #327 -- Swith to autonomous custom element for Safari support #357

Uh oh!

Conversation

codingjoe commented Dec 18, 2025

Uh oh!

codecov bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

codingjoe Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

codingjoe Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

codingjoe Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

Copilot AI commented Dec 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Dec 18, 2025 •

edited

Loading