fix: autofocus on open

cypress/plugins/index.js

@@ -0,0 +1,7 @@
+module.exports = (on, config) => {
+  if (config.testingType === 'component') {
+    require('@cypress/react/plugins/react-scripts')(on, config);
+  }
+
+  return config;
+};

example/src/components/ChatboxWrapper.tsx

@@ -9,6 +9,7 @@ import Chatbox, {
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation, hooks } from '../config/queryClient';
 import { PartialNewChatMessage } from '../../../src';
+import { AvatarHookType } from '../../../src/types';
 
 type Props = {};
 
@@ -58,7 +59,7 @@ const ChatboxWrapper: FC<Props> = () => {
       sendMessageFunction={sendMessage}
       deleteMessageFunction={deleteMessage}
       editMessageFunction={editMessage}
-      useAvatarHook={hooks.useAvatar}
+      useAvatarHook={hooks.useAvatar as AvatarHookType}
     />
   );
 };

src/components/Input.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, RefObject } from 'react';
+import React, { ChangeEvent, FC, RefObject, useEffect } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import TextField from '@material-ui/core/TextField';
 import Box from '@material-ui/core/Box';
@@ -44,6 +44,11 @@ const Input: FC<Props> = ({
 
   const { t } = useTranslation();
 
+  // autofocus on first render
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   const onClick = (): void => {
     if (textInput) {
       sendMessageFunction?.({ chatId, body: textInput });

src/render-ui.test.tsx

@@ -5,6 +5,7 @@ import { ImmutableMember, Member } from './types';
 import { MEMBERS } from '../cypress/fixtures/members';
 import { List } from 'immutable';
 import { mockUseAvatar } from '../cypress/fixtures/mockHooks';
+import { inputTextFieldTextAreaCypress } from './config/selectors';
 
 describe('Render Avatar', () => {
   beforeEach(() => {
@@ -32,3 +33,18 @@ describe('Render Avatar', () => {
     cy.get(`@${fakeHookName}`).should('have.been.called');
   });
 });
+
+describe('Autofocus on first render', () => {
+  it('should autofocus on open', () => {
+    mount(
+      <Chatbox
+        chatId={CHAT_ID}
+        currentMember={new ImmutableMember(MEMBERS.ANNA)}
+        members={List(Object.values(MEMBERS) as Member[])}
+        messages={List(CHAT_MESSAGES)}
+      />,
+    ).then(() =>
+      cy.get(`#${inputTextFieldTextAreaCypress}`).should('be.focused'),
+    );
+  });
+});