From 907e67639cc0183905c46faf7f403fcd0bd49d5a Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Tue, 20 Oct 2026 09:39:25 +0900
Subject: [PATCH] fix: interpolate cell text in HighlightCellText when no
 search query is active

The no-query branch returned the literal JSX text "props.text" instead of
the prop's value, since {props.text} was written as plain text instead of
an expression. Add a direct regression test for both the no-query and
active-query render paths.
---
 .../__tests__/highlight-cell-text.test.tsx    | 22 +++++++++++++++++++
 src/data-table/text-search.tsx                |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/data-table/__tests__/highlight-cell-text.test.tsx

diff --git a/src/data-table/__tests__/highlight-cell-text.test.tsx b/src/data-table/__tests__/highlight-cell-text.test.tsx
new file mode 100644
index 0000000000..0529811c3d
--- /dev/null
+++ b/src/data-table/__tests__/highlight-cell-text.test.tsx
@@ -0,0 +1,22 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { HighlightCellText } from '../text-search';
+
+describe('HighlightCellText', () => {
+  it('renders the text value when there is no active query', () => {
+    const { container } = render(<HighlightCellText text="hello world" query="" />);
+    expect(container.textContent).toBe('hello world');
+  });
+
+  it('renders the text value with the matching segment highlighted', () => {
+    const { container } = render(<HighlightCellText text="hello world" query="world" />);
+    expect(container.textContent).toBe('hello world');
+  });
+});
diff --git a/src/data-table/text-search.tsx b/src/data-table/text-search.tsx
index 53b8a8c172..9eb1c83c62 100644
--- a/src/data-table/text-search.tsx
+++ b/src/data-table/text-search.tsx
@@ -48,7 +48,7 @@ export const HighlightCellText: React.FC<{ text: string; query: string }> = (pro
   const [css, theme] = useStyletron();
 
   if (!props.query) {
-    return <>props.text</>;
+    return <>{props.text}</>;
   }
 
   return (