Merge pull request #1130 from appfolio/convert-tributejs-to-dynamic-i…

…mport Convert tributejsto dynamic import
appfolio · Jan 26, 2023 · bd6fcfa · bd6fcfa
2 parents 4156174 + a048293
commit bd6fcfa
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git a/src/components/Note/EditableNoteMentions.spec.js b/src/components/Note/EditableNoteMentions.spec.js
@@ -1,5 +1,5 @@
 import assert from 'assert';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { mount } from 'enzyme';
 import React from 'react';
@@ -55,7 +55,7 @@ describe('<EditableNoteMentions />', () => {
       });
 
       describe('with mentionable users', () => {
-        it('should show mentionable user dropdown on @ trigger', () => {
+        it('should show mentionable user dropdown on @ trigger', async () => {
           const mentionableUsers = [
             {
               key: 'John Doe',
@@ -73,10 +73,12 @@ describe('<EditableNoteMentions />', () => {
           render(<EditableNoteMentions {...props} />);
 
           const input = screen.getByRole('textbox');
-          userEvent.type(input, '@');
-
-          expect(screen.getByText('John Doe')).toBeTruthy();
-          expect(screen.getByText('Mike Smith')).toBeTruthy();
+          await waitFor(() => {
+            userEvent.clear(input);
+            userEvent.type(input, '@');
+            expect(screen.getByText('John Doe')).toBeTruthy();
+            expect(screen.getByText('Mike Smith')).toBeTruthy();
+          });
         });
       });
 

diff --git a/src/components/Note/EditableNoteMentions.tsx b/src/components/Note/EditableNoteMentions.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useRef } from 'react';
-import Tribute, { TributeItem } from 'tributejs';
+import { TributeItem } from 'tributejs';
 import Button from '../Button/Button';
 import ButtonToolbar from '../Button/ButtonToolbar';
 import Card from '../Card/Card';
@@ -58,30 +58,33 @@ const EditableNoteMentions: FC<EditableNoteMentionsProps> = ({
   const ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    if (mentionableUsers.length > 0 && ref.current) {
-      const tribute = new Tribute({
-        allowSpaces: true,
-        menuItemTemplate(item: TributeItem<any>) {
-          return `${item.string}<span class="note__mention-email">${item.original.email}</span>`;
-        },
-        noMatchTemplate: () => '',
-        selectClass: 'note__mention-highlight',
-        selectTemplate(item) {
-          if (ref.current) {
-            const atIndex = ref.current.value.lastIndexOf('@');
-            const event = {
-              target: {
-                value: `${ref.current.value.substring(0, atIndex + 1)}${item.original.value}`,
-              },
-            } as React.ChangeEvent<HTMLInputElement>;
-            onChange(event, note);
-          }
-          return `@${item.original.value}`;
-        },
-        values: mentionableUsers,
-      });
-      tribute.attach(ref.current);
-    }
+    (async () => {
+      if (mentionableUsers.length > 0 && ref.current) {
+        const Tribute = (await import('tributejs')).default;
+        const tribute = new Tribute({
+          allowSpaces: true,
+          menuItemTemplate(item: TributeItem<any>) {
+            return `${item.string}<span class="note__mention-email">${item.original.email}</span>`;
+          },
+          noMatchTemplate: () => '',
+          selectClass: 'note__mention-highlight',
+          selectTemplate(item) {
+            if (ref.current) {
+              const atIndex = ref.current.value.lastIndexOf('@');
+              const event = {
+                target: {
+                  value: `${ref.current.value.substring(0, atIndex + 1)}${item.original.value}`,
+                },
+              } as React.ChangeEvent<HTMLInputElement>;
+              onChange(event, note);
+            }
+            return `@${item.original.value}`;
+          },
+          values: mentionableUsers,
+        });
+        tribute.attach(ref.current);
+      }
+    })();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const mentionStyles = () => (