Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Conversation

jeffrey-ben
Copy link
Contributor

@jeffrey-ben jeffrey-ben commented Mar 20, 2025

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

@jeffrey-ben jeffrey-ben self-assigned this Mar 20, 2025
@jeffrey-ben
Copy link
Contributor Author

/snapit

@jeffrey-ben jeffrey-ben marked this pull request as ready for review March 20, 2025 20:41
Copy link
Contributor

🫰✨ 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
Copy link
Contributor Author

👋 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

Screenshot 2025-03-20 at 6 35 01 PM Screenshot 2025-03-20 at 6 36 27 PM

@Aubron
Copy link
Contributor

Aubron commented Mar 25, 2025

To be sure, I fired up an empty next.js project, can confirm I can clear the text field in safari, and didn't have any of the outline issues you were describing (probably something in the CSS variables of the specific environment?)

@jeffrey-ben jeffrey-ben merged commit 730349b into main Mar 26, 2025
14 checks passed
@jeffrey-ben jeffrey-ben deleted the fix-textfield-clear-button-in-safari branch March 26, 2025 14:27
jeffrey-ben pushed a commit that referenced this pull request Mar 26, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@13.9.5

### Patch Changes

- [#13413](#13413)
[`730349b`](730349b)
Thanks [@jeffrey-ben](https://github.com/jeffrey-ben)! - Fixed TextField
clear bug in Safari

## polaris.shopify.com@1.1.4

### Patch Changes

- Updated dependencies
\[[`730349b`](730349b)]:
    -   @shopify/polaris@13.9.5

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants