From 6f02f786b00e11b75da6b233d04d0bc301f3c090 Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Fri, 6 Mar 2026 14:28:34 +0100
Subject: [PATCH 1/2] Fix emoji false-positives in invisible character
 detection

# Conflicts:
#	CHANGELOG.md
---
 .typescript/tsbuild-esm.json                  |  2 +-
 CHANGELOG.md                                  |  2 +
 .../TextField/stories/TextField.stories.tsx   | 23 +++++
 .../tests/useTextValidation.test.tsx          | 88 +++++++++++++++++++
 src/components/TextField/useTextValidation.ts | 25 ++++--
 5 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 src/components/TextField/tests/useTextValidation.test.tsx

diff --git a/.typescript/tsbuild-esm.json b/.typescript/tsbuild-esm.json
index aa4118fed..fe99631ff 100644
--- a/.typescript/tsbuild-esm.json
+++ b/.typescript/tsbuild-esm.json
@@ -1,7 +1,7 @@
 {
     "extends": "./../tsconfig.json",
     "compilerOptions": {
-        "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2015.collection", "es2015.iterable"],
+        "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2022.intl", "es2015.collection", "es2015.iterable"],
         "module": "es2015",
         "target": "es5",
         "noEmit": false,
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f0b30302..1f47a111f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   adjust displaying fallback symbols in different browsers
 -   `<CodeMirror />`
     -   use the latest provided `onChange` function
+-   `<TextField />`, `<TextArea />`
+    -  fix emoji false-positives in invisible character detection
 
 ### Changed
 
diff --git a/src/components/TextField/stories/TextField.stories.tsx b/src/components/TextField/stories/TextField.stories.tsx
index 8a2907adb..17dde2784 100644
--- a/src/components/TextField/stories/TextField.stories.tsx
+++ b/src/components/TextField/stories/TextField.stories.tsx
@@ -61,3 +61,26 @@ const invisibleCharacterWarningProps: TextFieldProps = {
     defaultValue: "Invisible character ->​<-",
 };
 InvisibleCharacterWarning.args = invisibleCharacterWarningProps;
+
+/** Text field showing that emoji (✔️ variation-selector, 👨‍👩‍👧‍👦 ZWJ, 🏴󠁧󠁢󠁥󠁮󠁧󠁿 tag-flag, #️⃣ keycap)
+ * are NOT reported as invisible characters, while a genuine ZWS still is. */
+export const InvisibleCharacterWarningWithEmoji = Template.bind({});
+
+const invisibleCharacterWarningWithEmojiProps: TextFieldProps = {
+    ...Default.args,
+    invisibleCharacterWarning: {
+        callback: (codePoints) => {
+            if (codePoints.size) {
+                const codePointsString = [...codePoints]
+                    .map((n) => characters.invisibleZeroWidthCharacters.codePointMap.get(n)?.fullLabel)
+                    .join(", ");
+                alert("Invisible character detected in input string. Code points: " + codePointsString);
+            }
+        },
+        callbackDelay: 500,
+    },
+    onChange: () => {},
+    // ZWS should be flagged; ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣ should NOT be flagged
+    defaultValue: "Check\u200B ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣",
+};
+InvisibleCharacterWarningWithEmoji.args = invisibleCharacterWarningWithEmojiProps;
diff --git a/src/components/TextField/tests/useTextValidation.test.tsx b/src/components/TextField/tests/useTextValidation.test.tsx
new file mode 100644
index 000000000..75eab4dbc
--- /dev/null
+++ b/src/components/TextField/tests/useTextValidation.test.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { act,render } from "@testing-library/react";
+
+import { useTextValidation } from "../useTextValidation";
+
+const HookWrapper: React.FC<{ value: string; callback: jest.Mock; callbackDelay?: number }> = ({
+    value,
+    callback,
+    callbackDelay = 0,
+}) => {
+    useTextValidation({
+        value,
+        onChange: jest.fn(),
+        invisibleCharacterWarning: { callback, callbackDelay },
+    });
+    return null;
+};
+
+describe("useTextValidation", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    /** Render the hook with a controlled value and flush the debounce timer. */
+    const runWithValue = (value: string, callbackDelay = 0) => {
+        const callback = jest.fn();
+        render(<HookWrapper value={value} callback={callback} callbackDelay={callbackDelay} />);
+        act(() => {
+            jest.runAllTimers();
+        });
+        return callback;
+    };
+
+    describe("invisible character detection", () => {
+        it("reports empty set for plain text", () => {
+            const callback = runWithValue("hello world");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("detects zero-width space (U+200B)", () => {
+            const callback = runWithValue("hello\u200Bworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("detects zero-width non-joiner (U+200C)", () => {
+            const callback = runWithValue("hello\u200Cworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200c]));
+        });
+    });
+
+    describe("emoji false-positive prevention", () => {
+        it("does not flag ✔️ (base char + variation selector U+FE0F)", () => {
+            const callback = runWithValue("✔️");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag ZWJ sequence emoji 👨‍👩‍👧‍👦", () => {
+            const callback = runWithValue("👨‍👩‍👧‍👦");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag tag-based flag emoji 🏴󠁧󠁢󠁥󠁮󠁧󠁿", () => {
+            const callback = runWithValue("🏴󠁧󠁢󠁥󠁮󠁧󠁿");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag keycap emoji #️⃣", () => {
+            const callback = runWithValue("#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+
+    describe("mixed content", () => {
+        it("detects ZWS while ignoring surrounding emoji", () => {
+            const callback = runWithValue("Check\u200B ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("reports empty set for text with only emoji", () => {
+            const callback = runWithValue("✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+});
diff --git a/src/components/TextField/useTextValidation.ts b/src/components/TextField/useTextValidation.ts
index e90450fa4..a3a0cd3e5 100644
--- a/src/components/TextField/useTextValidation.ts
+++ b/src/components/TextField/useTextValidation.ts
@@ -44,19 +44,28 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
         state.current.detectedCodePoints = new Set();
     }, []);
     const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), []);
+    const segmenter = React.useMemo(() => new Intl.Segmenter(undefined, { granularity: "grapheme" }), []);
+    const emojiRegex = React.useMemo(() => new RegExp("\\p{Extended_Pictographic}|\\u20E3", "u"), []);
+
     const detectIssues = React.useCallback(
         (value: string): void => {
-            detectionRegex.lastIndex = 0;
-            let matchArray = detectionRegex.exec(value);
-            while (matchArray) {
-                const codePoint = matchArray[0].codePointAt(0);
-                if (codePoint) {
-                    state.current.detectedCodePoints.add(codePoint);
+            for (const { segment } of segmenter.segment(value)) {
+                if (emojiRegex.test(segment)) {
+                    // skip emoji clusters since they legitimately contain variation selectors, ZWJ, tags, etc.
+                } else {
+                    detectionRegex.lastIndex = 0;
+                    let matchArray = detectionRegex.exec(segment);
+                    while (matchArray) {
+                        const codePoint = matchArray[0].codePointAt(0);
+                        if (codePoint) {
+                            state.current.detectedCodePoints.add(codePoint);
+                        }
+                        matchArray = detectionRegex.exec(segment);
+                    }
                 }
-                matchArray = detectionRegex.exec(value);
             }
         },
-        [detectionRegex]
+        [detectionRegex, segmenter, emojiRegex]
     );
     // Checks if the value contains any problematic characters with a small delay.
     const checkValue = React.useCallback(

From 6267976cf6f454d3bb228a46e8dfb521833fc6bc Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Mon, 9 Mar 2026 09:46:00 +0100
Subject: [PATCH 2/2] Adjust tests

---
 .../TextField/stories/TextField.stories.tsx           |  6 +++---
 .../TextField/tests/useTextValidation.test.tsx        | 11 +++--------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/TextField/stories/TextField.stories.tsx b/src/components/TextField/stories/TextField.stories.tsx
index 17dde2784..aa2da8bef 100644
--- a/src/components/TextField/stories/TextField.stories.tsx
+++ b/src/components/TextField/stories/TextField.stories.tsx
@@ -62,7 +62,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
 };
 InvisibleCharacterWarning.args = invisibleCharacterWarningProps;
 
-/** Text field showing that emoji (✔️ variation-selector, 👨‍👩‍👧‍👦 ZWJ, 🏴󠁧󠁢󠁥󠁮󠁧󠁿 tag-flag, #️⃣ keycap)
+/** Text field showing that emoji (✔️ variation-selector, 👨‍👩‍👧‍👦 ZWJ,  #️⃣ keycap)
  * are NOT reported as invisible characters, while a genuine ZWS still is. */
 export const InvisibleCharacterWarningWithEmoji = Template.bind({});
 
@@ -80,7 +80,7 @@ const invisibleCharacterWarningWithEmojiProps: TextFieldProps = {
         callbackDelay: 500,
     },
     onChange: () => {},
-    // ZWS should be flagged; ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣ should NOT be flagged
-    defaultValue: "Check\u200B ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣",
+    // ZWS should be flagged; ✔️ 👨‍👩‍👧‍👦 #️⃣ should NOT be flagged
+    defaultValue: "Check\u200B ✔️ 👨‍👩‍👧‍👦 #️⃣",
 };
 InvisibleCharacterWarningWithEmoji.args = invisibleCharacterWarningWithEmojiProps;
diff --git a/src/components/TextField/tests/useTextValidation.test.tsx b/src/components/TextField/tests/useTextValidation.test.tsx
index 75eab4dbc..253bf50a2 100644
--- a/src/components/TextField/tests/useTextValidation.test.tsx
+++ b/src/components/TextField/tests/useTextValidation.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { act,render } from "@testing-library/react";
+import { act, render } from "@testing-library/react";
 
 import { useTextValidation } from "../useTextValidation";
 
@@ -63,11 +63,6 @@ describe("useTextValidation", () => {
             expect(callback).toHaveBeenCalledWith(new Set());
         });
 
-        it("does not flag tag-based flag emoji 🏴󠁧󠁢󠁥󠁮󠁧󠁿", () => {
-            const callback = runWithValue("🏴󠁧󠁢󠁥󠁮󠁧󠁿");
-            expect(callback).toHaveBeenCalledWith(new Set());
-        });
-
         it("does not flag keycap emoji #️⃣", () => {
             const callback = runWithValue("#️⃣");
             expect(callback).toHaveBeenCalledWith(new Set());
@@ -76,12 +71,12 @@ describe("useTextValidation", () => {
 
     describe("mixed content", () => {
         it("detects ZWS while ignoring surrounding emoji", () => {
-            const callback = runWithValue("Check\u200B ✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣");
+            const callback = runWithValue("Check\u200B ✔️👨‍👩‍👧‍#️⃣");
             expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
         });
 
         it("reports empty set for text with only emoji", () => {
-            const callback = runWithValue("✔️ 👨‍👩‍👧‍👦 🏴󠁧󠁢󠁥󠁮󠁧󠁿 #️⃣");
+            const callback = runWithValue("✔️ 👨‍👩‍👧‍👦#️⃣");
             expect(callback).toHaveBeenCalledWith(new Set());
         });
     });