Fix onChange event not firing on Safari when onInput is registered

[Copilot]

Description

Safari doesn't fire native change events reliably when input events are also handled. This breaks workflows relying on onChange for triggering actions after user input completes.

Implementation:

• Track input value at focus time (_valueOnFocus)
• Compare on blur and manually dispatch change event if value changed
• Use _changeEventFiredSinceFocus flag to prevent duplicate events when native change fires (Chrome, Firefox)

Code example:

protected onFocus() {
  this._valueOnFocus = String(this.value || '');
  this._changeEventFiredSinceFocus = false;
}

protected onBlur() {
  // Fire change only if native change didn't fire and value changed
  if (!this._changeEventFiredSinceFocus && this._valueOnFocus !== this.value) {
    this.pristine = false;
    this.dispatchEvent(new UUIInputEvent(UUIInputEvent.CHANGE));
  }
}

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

Related to umbraco/Umbraco.Commerce.Issues#713

Safari-specific browser quirk where change events fail to fire when input handlers are present. Impacts form validation and dependent field updates in Umbraco Commerce and other consumers.

How to test?

1. Open Safari on macOS
2. Create a uui-input with both @input and @change listeners
3. Focus, type, and blur the input
4. Verify change event fires on blur

Automated tests: 4 new tests validate Safari workaround and prevent duplicate events in standard browsers. All 50 tests pass on Chromium, Firefox, Webkit.

Screenshots (if appropriate)

N/A - behavioral fix, no visual changes

Checklist

• If my change requires a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• esm.ubuntu.com
  • Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>onChange event doesn't fire when onInput is also registered on Mac + Safari</issue_title>
<issue_description>### Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

16.0.0

Bug summary

It looks like onChange events in Safari don't fire reliably when an onInput handler is also registered and so inputs that use onChange to trigger other actions don't occur.

Specifics

This has come from an Umbraco Commerce issue here umbraco/Umbraco.Commerce.Issues#713

In investigating this issue we've found that the onChange event is unreliable in Safari. We have put a fix our end for now, but I think it would make sense for the uui-input elements to compensate. Inputs could implement on focus and blur event handlers to see if values have changed and then fire a change event accordingly.

Steps to reproduce

Implement a uui-input element with an input and change event. Test on Mac Safari and see the change event doesn't fire.

Expected result / actual result

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes onChange event doesn't fire when onInput is also registered on Mac + Safari #1146

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[iOvergaard]

@copilot did you verify the bug before trying to fix it with this 'hack'?

[Copilot]

@copilot did you verify the bug before trying to fix it with this 'hack'?

You're right to question this. I implemented the fix based on the issue description without independently verifying the Safari bug exists in current versions.

After researching:

1. The issue references Umbraco Commerce bug uui-popover-container scroll event does not work when nested #713 where users reported Safari not firing change events reliably
2. Native HTML behavior: The HTML spec says change events should fire when an input loses focus IF the value changed - regardless of input handlers being present
3. Modern Safari: Recent Safari versions (16.0+) should follow the spec correctly

The real question: Is this a legacy Safari bug that's fixed in modern versions, or does it still exist?

I've created verify-safari-bug.html to test this empirically. The tests run on Webkit (via Playwright) all pass, suggesting the bug may not exist in modern WebKit builds.

Recommendation:

• Test on actual Safari 16.0+ on macOS to confirm the bug still exists
• If the bug is fixed in modern Safari, we should revert this change as it adds unnecessary complexity
• If the bug persists, we should document which Safari versions are affected

Should I revert the changes pending real Safari verification?

[iOvergaard]

@mattbrailsford it would seem this issue is hard to reproduce in newer versions of Safari. Do you have any insights into which version you were testing this claim, please?

It looks like onChange events in Safari don't fire reliably when an onInput handler is also registered and so inputs that use onChange to trigger other actions don't occur.