From 61aad5df93025c60556d00adfb8309585edd6615 Mon Sep 17 00:00:00 2001
From: Jaeho Lee <me@jaeholee.org>
Date: Wed, 21 Dec 2022 17:14:31 +0900
Subject: [PATCH] fix: correct styling for disabling default webkit searchfield
 button

---
 .changeset/metal-keys-do.md                     |  5 +++++
 packages/components/src/TextField/styles.css.ts | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/metal-keys-do.md

diff --git a/.changeset/metal-keys-do.md b/.changeset/metal-keys-do.md
new file mode 100644
index 00000000..76b1671f
--- /dev/null
+++ b/.changeset/metal-keys-do.md
@@ -0,0 +1,5 @@
+---
+"@greenlabs/formula-components": patch
+---
+
+fix: correct styling for disabling default webkit searchfield button
diff --git a/packages/components/src/TextField/styles.css.ts b/packages/components/src/TextField/styles.css.ts
index 7c90d803..11c66a85 100644
--- a/packages/components/src/TextField/styles.css.ts
+++ b/packages/components/src/TextField/styles.css.ts
@@ -283,10 +283,18 @@ export const inputStyle = style({
   borderTopRightRadius: 4,
   borderBottomRightRadius: 4,
   selectors: {
-    [`&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-ms-clear`]:
-      {
-        WebkitAppearance: "none",
-      },
+    [`&::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration`]: {
+      display: "none",
+    },
+    [`&::-ms-clear,
+      &::-ms-reveal`]: {
+      display: "none",
+      width: 0,
+      height: 0,
+    },
     [`${textFieldVariants["line.large"]} &`]: {
       vars: {
         [vars.inputHeight]: "33px",