Shopify Polaris Web Components Event Values are `undefined`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.5k
- Forks
- 564
- PR merge metrics
- No merged PRs in 30d
Description
Summary
Shopify Polaris web components' events (onChange, onInput, etc.) fire correctly but always return undefined values when accessed through event.target.value or event.currentTarget.value inside WXT content scripts, regardless of whether using vanilla JavaScript or Preact.
Test Scenarios Demonstrated
The demo includes 4 comparison scenarios:
| Scenario | Events Fire | Values Accessible | Console Prefix |
|---|---|---|---|
| 1. Plain HTML elements (vanilla JS) | ✅ Yes | ✅ Yes | select/input |
| 2. Shadow DOM elements (vanilla JS) | ✅ Yes | ✅ Yes | SHADOW |
| 3. Polaris components (vanilla JS) | ✅ Yes | ❌ No (undefined) | VANILLA-POLARIS |
| 4. Polaris components (Preact) | ✅ Yes | ❌ No (undefined) | s-select/s-text-field |
Key Observations
- Events fire correctly: The event handlers are triggered properly in both vanilla JS and Preact
- Values are undefined in both:
event.target.valuereturnsundefinedfor Polaris components regardless of whether using vanilla JS or Preact - Framework-agnostic issue: The problem affects Polaris components even with vanilla JavaScript, not just Preact
- Regular elements work: Plain HTML elements and Shadow DOM elements work fine
- Works outside WXT: Same code works in regular apps (CodeSandbox)
Reproduction
https://github.com/junaidkbr/wxt-preact-polaris
Steps to reproduce
No response
System Info
System:
OS: macOS 15.6.1
CPU: (12) arm64 Apple M2 Max
Memory: 2.34 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.13.0/bin/yarn
npm: 11.1.0 - ~/.nvm/versions/node/v22.13.0/bin/npm
bun: 1.2.15 - ~/.bun/bin/bun
Browsers:
Chrome: 140.0.7339.133
Edge: 114.0.1823.67
Safari: 18.6
npmPackages:
preact: ^10.26.9 => 10.26.9
wxt: ^0.20.6 => 0.20.7
Used Package Manager
bun
Validations
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal reproduction and inspect how WXT content scripts receive Polaris events, comparing event.target.value and event.currentTarget.value with the plain HTML and Shadow DOM scenarios. Done means the Polaris event values are accessible in vanilla JavaScript and Preact content scripts, with the reproduction demonstrating the corrected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100