fix: autocomplete items clicking works on webkit (#1494)

fix: autocomplete items clicking works on webkit

.github/workflows/ci.yml

@@ -39,8 +39,12 @@ jobs:
       - name: ⚗️ End-to-end tests
         run: |
           npx playwright install
+          npx playwright install-deps
           yarn e2e-fixtures
-          yarn e2e
+          # running with --browser=all causes failures
+          yarn e2e --browser=chromium
+          yarn e2e --browser=webkit
+          yarn e2e --browser=firefox
         env:
           E2E_JUMP_TO_MESSAGE_CHANNEL: jump-to-message
           E2E_ADD_MESSAGE_CHANNEL: add-message

.nvmrc

@@ -1 +1 @@
-v14.0.0
+lts/*

e2e/autocomplete-mention.test.ts

@@ -0,0 +1,18 @@
+/* eslint-disable jest/no-done-callback */
+/* eslint-disable jest/require-top-level-describe */
+import { expect, test } from '@playwright/test';
+
+test.describe('autocomplete a mention', () => {
+  test('should fill in textarea with username', async ({ baseURL, page }) => {
+    await page.goto(`${baseURL}/?story=hello--basic-setup`);
+    await page.waitForSelector('[data-storyloaded]');
+    await page.fill('data-testid=message-input', '@');
+    const button = await page.locator(
+      'button.rta__entity >> :nth-match(span.str-chat__user-item--name, 1)',
+    );
+    button.click();
+    const textContent = await button.textContent();
+
+    await expect(page.locator('data-testid=message-input')).toContainText(`@${textContent}`);
+  });
+});

e2e/fixtures.mjs

@@ -22,20 +22,25 @@ dotenv.config({ path: `.env.local` });
 
   // 'Jump to message' channel
   {
+    const MESSAGES_COUNT = 150;
     console.log(`Creating and populating channel '${E2E_JUMP_TO_MESSAGE_CHANNEL}'...`);
     const channel = chat.channel('messaging', E2E_JUMP_TO_MESSAGE_CHANNEL, {
       created_by_id: E2E_TEST_USER_1,
       members: [E2E_TEST_USER_1, E2E_TEST_USER_2],
     });
     await channel.create();
     await channel.truncate();
-    for (let i = 0, len = 150; i < len; i++) {
-      process.stdout.write(`.`);
+    for (let i = 0; i < MESSAGES_COUNT; i++) {
+      if (process.stdout.clearLine && process.stdout.cursorTo) {
+        printProgress(i / MESSAGES_COUNT);
+      }
+
       await channel.sendMessage({
         text: `Message ${i}`,
         user: { id: i % 2 ? E2E_TEST_USER_1 : E2E_TEST_USER_2 },
       });
     }
+    process.stdout.write('\n');
   }
 
   // 'Add message' channel
@@ -50,3 +55,13 @@ dotenv.config({ path: `.env.local` });
     await channel.truncate();
   }
 })();
+
+const printProgress = (progress) => {
+  process.stdout.clearLine();
+  process.stdout.cursorTo(0);
+
+  const BAR_LENGTH = 50;
+  const filled = Math.ceil(BAR_LENGTH * progress);
+  const empty = BAR_LENGTH - filled;
+  process.stdout.write(`[${'#'.repeat(filled)}${' '.repeat(empty)}] ${Math.ceil(progress * 100)}%`);
+};

src/components/AutoCompleteTextarea/Item.js

@@ -22,7 +22,9 @@ export const Item = React.forwardRef(function Item(props, innerRef) {
         onMouseEnter={selectItem}
         ref={innerRef}
       >
-        <Component entity={item} selected={selected} />
+        <div tabIndex={-1}>
+          <Component entity={item} selected={selected} />
+        </div>
       </button>
     </li>
   );

src/components/AutoCompleteTextarea/Textarea.js

@@ -728,6 +728,7 @@ export class ReactTextareaAutocomplete extends React.Component {
       >
         {this.renderSuggestionListContainer()}
         <Textarea
+          data-testid='message-input'
           {...this._cleanUpProps()}
           className={`rta__textarea ${className || ''}`}
           maxRows={maxRows}

src/stories/hello.stories.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@stream-io/stream-chat-css/dist/css/index.css';
+import React, { useEffect, useState } from 'react';
+import { ChannelFilters, ChannelOptions, ChannelSort, Event, StreamChat } from 'stream-chat';
+import {
+  Channel,
+  ChannelHeader,
+  ChannelList,
+  Chat,
+  MessageInput,
+  MessageList,
+  Thread,
+  Window,
+} from '../index';
+import { apiKey, StreamChatGenerics } from './utils';
+
+const channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
+const userId = import.meta.env.E2E_TEST_USER_1 as string;
+const token = import.meta.env.E2E_TEST_USER_1_TOKEN as string;
+
+if (!channelId || typeof channelId !== 'string') {
+  throw new Error('expected ADD_MESSAGE_CHANNEL');
+}
+
+// Sort in reverse order to avoid auto-selecting unread channel
+const sort: ChannelSort = { last_updated: 1 };
+const filters: ChannelFilters = { members: { $in: [userId] }, type: 'messaging' };
+const options: ChannelOptions = { limit: 10, presence: true, state: true };
+
+const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+let sharedPromise = Promise.resolve();
+
+export const BasicSetup = () => {
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    sharedPromise.then(() => chatClient.connectUser({ id: userId }, token));
+
+    const handleConnectionChange = ({ online = false }: Event) => {
+      setConnected(online);
+    };
+
+    chatClient.on('connection.changed', handleConnectionChange);
+
+    return () => {
+      chatClient.off('connection.changed', handleConnectionChange);
+      sharedPromise = chatClient.disconnectUser();
+    };
+  }, []);
+
+  if (!connected) {
+    return <p>Connecting {userId}...</p>;
+  }
+
+  return (
+    <Chat client={chatClient}>
+      <ChannelList filters={filters} options={options} showChannelSearch sort={sort} />
+      <Channel>
+        <Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageInput focus />
+        </Window>
+        <Thread />
+      </Channel>
+    </Chat>
+  );
+};