Fixing an issue with Highlight (#6644)

* Fixing an issue with highlight

* Simplifying an object property

* docs: add changelog

* Fixing tests

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/blue-chicken-marry.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/layout": patch
+---
+
+Fixing an issue with `Highlight`

packages/components/layout/src/highlight.tsx

@@ -36,7 +36,7 @@ function buildRegex(query: string[]) {
 function highlightWords({ text, query }: Options): Chunk[] {
   const regex = buildRegex(Array.isArray(query) ? query : [query])
   if (!regex) {
-    return []
+    return [{ text, match: false}]
   }
   const result = text.split(regex).filter(Boolean)
   return result.map((str) => ({ text: str, match: regex.test(str) }))

packages/components/layout/tests/layout.test.tsx

@@ -177,15 +177,18 @@ describe("<Divider />", () => {
 
 describe("<Highlight/>", () => {
   test.each([[], ""])(
-    "useHighlight returns no matches if queries is empty %p ",
+    "useHighlight returns no matches if queries is empty but returns original value",
     (query) => {
+      const text = "this is an ordinary text which should not have any matches"
       const { result } = hooks.render(() =>
         useHighlight({
-          query: query,
-          text: "this is an ordinary text which should not have any matches",
+          query,
+          text,
         }),
       )
-      expect(result.current).toHaveLength(0)
+      expect(result.current).toHaveLength(1)
+      expect(result.current[0].match).toBe(false)
+      expect(result.current[0].text).toBe(text)
     },
   )