wxt-dev / wxt-dev/wxt

Shopify Polaris Web Components Event Values are `undefined`

Open
#1,891 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending-triage
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

  1. Events fire correctly: The event handlers are triggered properly in both vanilla JS and Preact
  2. Values are undefined in both: event.target.value returns undefined for Polaris components regardless of whether using vanilla JS or Preact
  3. Framework-agnostic issue: The problem affects Polaris components even with vanilla JavaScript, not just Preact
  4. Regular elements work: Plain HTML elements and Shadow DOM elements work fine
  5. 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.