onChange not working on s-select

Polaris
1

I am using Polaris Web Components in a Chrome extension built with Preact. Here’s what I have:

<s-select
  label="Presets"
  labelAccessibilityVisibility="exclusive"
  onChange={(event) => {
    console.log('onChange:', event.currentTarget);
    console.log('onChange:', event.currentTarget.value);
  }}
>
  <s-option value="0">Select a preset</s-option>
  <s-option value="rf55n9mc3bgbok">Preset name</s-option>
</s-select>

I get this output:

onChange:currentTarget <s-select label=​"Presets" labelaccessibilityvisibility=​"exclusive">​…​</s-select>​
onChange:value undefined

What am I doing wrong here? What’s the right way to get the new value onChange?

2

In a Preact Codesandbox I’m unable to reproduce the issue you’re seeing; I can get .value off of the Select.

https://codesandbox.io/p/sandbox/snyns3

3

Are you still seeing this issue @junaidkbr ?

4

Thanks @Anthony_Frehner for providing the snippet.

I don’t think its a Preact problem. This is a problem with the browser extension framework WXT.

Here’s a bare bone project using WXT + Preact + Polaris. GitHub - junaidkbr/wxt-preact-polaris

The main files to focus on:

  1. The renderer: wxt-preact-polaris/entrypoints/main.content/index.tsx at main · junaidkbr/wxt-preact-polaris · GitHub
  2. The component: wxt-preact-polaris/entrypoints/main.content/App.tsx at main · junaidkbr/wxt-preact-polaris · GitHub

And even if I use React with WXT, I still get the same behavior.

5

That being said, within the WXT framework, HTML input fields behave as normal and onChange events fetch the value correctly.

So, I am thinking, maybe its WXT’s injection and Polaris’ shadow DOM making things incompatible?