Fixing TextField clear button in Safari

[jeffrey-ben]

WHY are these changes introduced?

The clear button in TextField components were not working in Safari. This bug was raised previously (issue linked below) and a fix was merged in polaris-internal.

The fix merged in polaris-internal can be seen here https://github.com/Shopify/polaris-internal/pull/895

This PR adds the same fix into the external Polaris version.

Fixes https://github.com/Shopify/merchant-to-merchant/issues/20327

How to 🎩

1. Checkout this branch on local dev
2. Open Storybook in Safari and navigate to the TextField > With Clear Button story
3. Click on the clear button and the text should clear and the textfield should still remain focused.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[jeffrey-ben]

/snapit

[github-actions]

🫰✨ Thanks @jeffrey-ben! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20250320204209"

[jeffrey-ben]

👋 Tophat works great on the Polaris side - but when I update the package.json with the snapshot version in Collective, the bug persists 🤔 There's also this weird behaviour where all buttons have a red outline (?) Wondering if I am missing a step somewhere