S-button in <s-text-field> accessory slot is hidden via inline display: none when rendered by React

Polaris
1

Environment

  • App Home / embedded admin app, React 18
  • Polaris web components loaded via (unversioned) + app-bridge.js

What I’m doing - the documented accessory slot:

<s-text-field label="Recipients" placeholder="email@example.com">
  <s-button slot="accessory" onClick={onAddEmail}>Add</s-button>
</s-text-field>

Expected: the button renders in the field’s accessory area (as in the TextField docs, and as itdoes in a plain-HTML CodePen with identical markup).

Actual: the button never appears. In dev tools it’s correctly assigned to the slot (shows the
slot badge, shadow root present), but the host element has an inline style=“display: none;”
that’s never cleared:

<s-text-field>
  <s-button slot="accessory" style="display: none;">   <!-- hidden -->
    #shadow-root (open)
      <button class="button size-base tone-auto variant-auto" type="button">Add</button>
  </s-button>
</s-text-field>

Identical markup works in plain HTML (CodePen) - only React rendering fails. It looks like the
field hides the slotted accessory initially and the reveal doesn’t run for React-managed
children.

Question: Is the accessory slot supported when the child is rendered by React, or is it
harvested/revealed only at element-upgrade time (which React’s reconciliation misses)?
Recommended pattern/workaround?

2

Hey @Luke - thanks for flagging this, and for the detailed repro context.

Just confirming the intended behaviour on our end: the accessory slot itself is supported for s-text-field, and using a button/clickable action there should be a valid pattern. That said, the inline style="display: none" being left on the slotted s-button does seem a bit weird to me for sure.

I’m going to look into the expected behaviour for this on our end here, especially around React-rendered children in that accessory slot, and I’ll loop back once I have more info.

4

Just to add here - I believe the click events for the nested button is also broken (in React App Home), but works in admin UI extensions.

5

Hi @Luke I’ve tried reproducing this in a few different environments including a react 18 playground but to no avail. Can you create a sandbox I can take a better look at?