Use form elements and add submit handlers in chat, haircheck and the prejoin screen

custom/basic-call/components/Prejoin/Intro.js

@@ -35,6 +35,10 @@ export const Intro = ({
   }, [room]);
 
   return (
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      onJoin(roomName, owner, fetchToken);
+    }}>
       <Card>
         <CardHeader>{title}</CardHeader>
         <CardBody>
@@ -66,13 +70,14 @@ export const Intro = ({
         </CardBody>
         <CardFooter divider>
           <Button
-          onClick={() => onJoin(roomName, owner, fetchToken)}
+            type="submit"
             disabled={!roomName || fetching}
           >
             {fetching ? 'Fetching token...' : 'Join meeting'}
           </Button>
         </CardFooter>
       </Card>
+    </form>
   );
 };
 

custom/shared/components/HairCheck/HairCheck.js

@@ -30,7 +30,7 @@ import { useDeepCompareMemo } from 'use-deep-compare';
  * - Set user name and join call / request access
  */
 export const HairCheck = () => {
-  const { callObject, join } = useCallState();
+  const { callObject } = useCallState();
   const { localParticipant } = useParticipants();
   const {
     deviceState,
@@ -167,13 +167,13 @@ export const HairCheck = () => {
         />
         <Button
           disabled={joining || userName.length < 3}
-          onClick={() => joinCall(userName)}
+          type="submit"
         >
           Join call
         </Button>
       </>
     );
-  }, [userName, joinCall, joining, setUserName]);
+  }, [userName, joining, setUserName]);
 
   return (
     <>
@@ -222,7 +222,12 @@ export const HairCheck = () => {
             </div>
             {tileMemo}
           </div>
+          <form onSubmit={(e) => {
+            e.preventDefault();
+            joinCall(userName);
+          }}>
             <footer>{waiting ? showWaitingMessage : showUsernameInput}</footer>
+          </form>
         </div>
 
         <style jsx>{`

custom/text-chat/components/ChatAside.js

@@ -57,6 +57,11 @@ export const ChatAside = () => {
           </div>
         ))}
       </div>
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage(newMessage);
+        setNewMessage('');
+      }}>
         <footer className="chat-footer">
           <TextInput
             value={newMessage}
@@ -68,14 +73,12 @@ export const ChatAside = () => {
             className="send-button"
             variant="transparent"
             disabled={!newMessage}
-          onClick={() => {
-            sendMessage(newMessage);
-            setNewMessage('');
-          }}
+            type="submit"
           >
             Send
           </Button>
         </footer>
+      </form>
       <style jsx>{`
         .messages-container {
           flex: 1;