Issue with onClick in s-text-field accessory slot

Polaris
1

Hi there,

We’re experiencing issues with the accessory slot in the s-text-field component. The onClick event doesn’t seem to be firing when interacting with the accessory element.

I found a related thread from July 2025 that appears to describe the same behavior:

Is this a known issue, or is there a recommended workaround?

Thanks!

/// <reference types="@shopify/app-bridge-types" />
import { CallbackEvent } from "@shopify/polaris-types";
import { useState } from "react";

export default function ApiKeyComponent() {
  const { t } = useTranslation();
  const [apiKey, setApiKey] = useState("");

  async function handleCopy(event: CallbackEvent<"s-button">) {
    console.log("Copy API Key", apiKey);
    event.preventDefault();
    await navigator.clipboard.writeText(apiKey);
    shopify.toast.show("Text copied to clipboard");
  }

  return (
    <>
      <s-page>
        <s-section heading="API Key">
          <s-stack gap="base">
            <s-text-field
              label="API Key"
              value={apiKey}
              placeholder="******"
              details="Some details"
              readOnly
              icon="key"
            >
              <s-button
                slot="accessory"
                icon="clipboard"
                variant="tertiary"
                onClick={handleCopy}
              ></s-button>
            </s-text-field>
          </s-stack>
        </s-section>
      </s-page>
    </>
  );
}