Merge pull request #1298 from Bynder/issue/mention-input-props-and-tests

fix ReactMentions props and fix tests that stop local linting
Bynder · Sep 19, 2023 · 37aae4c · 37aae4c
2 parents af0525d + 36e776f
commit 37aae4c
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 7 deletions.
diff --git a/lib/ColField/tests/ColField.spec.tsx b/lib/ColField/tests/ColField.spec.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, fireEvent } from "@testing-library/react";
 // @ts-expect-error TS(2307): Cannot find module 'lib/ColField/ColField' or its ... Remove this comment to see the full error message
 import ColField from "lib/ColField/ColField";

diff --git a/lib/InputConfirmationModal/tests/InputConfirmationModal.spec.tsx b/lib/InputConfirmationModal/tests/InputConfirmationModal.spec.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, fireEvent } from "@testing-library/react";
 import { InputConfirmationModal } from "lib";
 import React from "react";

diff --git a/lib/PillInput/tests/PillInput.spec.tsx b/lib/PillInput/tests/PillInput.spec.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { afterEach, describe, expect, it } from "vitest";
 import { render, fireEvent, cleanup } from "@testing-library/react";
 import { PillInput } from "../PillInput/PillInput";
 

diff --git a/lib/SelectionBar/specs/SelectionBar.spec.tsx b/lib/SelectionBar/specs/SelectionBar.spec.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import { cleanup, render } from "@testing-library/react";
 // @ts-expect-error TS(2307): Cannot find module 'lib/SelectionBar' or its corre... Remove this comment to see the full error message
 import SelectionBar from "lib/SelectionBar";

diff --git a/lib/Windowing/tests/Windowing.spec.tsx b/lib/Windowing/tests/Windowing.spec.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
 import { Windowing } from "../..";

diff --git a/lib/src/modules/input/InputWithMentions.tsx b/lib/src/modules/input/InputWithMentions.tsx
@@ -40,7 +40,7 @@ export function InputWithMentions({
   const removeMentionMarkup = (newVal: any) => {
     const pattern = /(?:@\[\w+\])+/gi;
     return newVal.replace(pattern, (match: any) => {
-      const mention = match.replace(/\]|\[/g, "");
+      const mention = match.replace(/\]|\[|\(\d+\)/g, "");
       return mention;
     });
   };
@@ -77,8 +77,6 @@ export function InputWithMentions({
         className="mentions-input"
         value={inputValue}
         onChange={handleChange}
-        markup="@[__display__]"
-        displayTransform={(id: any, display: any) => `@${display}`}
         suggestionsPortalHost={mentionsPortalRef.current}
         onFocus={() => setHasFocus(true)}
         onBlur={() => setHasFocus(false)}
@@ -89,6 +87,8 @@ export function InputWithMentions({
           onAdd={onMention}
           data={(search: any) => searchForUsers(search)}
           appendSpaceOnAdd
+          displayTransform={(id: any, display: any) => `@${display}`}
+          markup="@[__display__]"
           renderSuggestion={(suggestion: any) => (
             <Avatar url={suggestion.avatar} initials={suggestion.initials}>
               <AvatarInformation