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

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

@@ -35,44 +35,49 @@ export const Intro = ({
   }, [room]);
 
   return (
-    <Card>
-      <CardHeader>{title}</CardHeader>
-      <CardBody>
-        {error && (
-          <Well variant="error">
-            Failed to obtain token <p>{error}</p>
-          </Well>
-        )}
-        <Field label="Enter room to join">
-          <TextInput
-            type="text"
-            prefix={`${domain}.daily.co/`}
-            placeholder="Room name"
-            defaultValue={roomName}
-            onChange={(e) => setRoomName(e.target.value)}
-            required
-          />
-        </Field>
-        {!forceFetchToken && (
-          <Field label="Fetch meeting token">
-            <BooleanInput onChange={(e) => setFetchToken(e.target.checked)} />
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      onJoin(roomName, owner, fetchToken);
+    }}>
+      <Card>
+        <CardHeader>{title}</CardHeader>
+        <CardBody>
+          {error && (
+            <Well variant="error">
+              Failed to obtain token <p>{error}</p>
+            </Well>
+          )}
+          <Field label="Enter room to join">
+            <TextInput
+              type="text"
+              prefix={`${domain}.daily.co/`}
+              placeholder="Room name"
+              defaultValue={roomName}
+              onChange={(e) => setRoomName(e.target.value)}
+              required
+            />
           </Field>
-        )}
-        {fetchToken && !forceOwner && (
-          <Field label="Join as owner">
-            <BooleanInput onChange={(e) => setOwner(e.target.checked)} />
-          </Field>
-        )}
-      </CardBody>
-      <CardFooter divider>
-        <Button
-          onClick={() => onJoin(roomName, owner, fetchToken)}
-          disabled={!roomName || fetching}
-        >
-          {fetching ? 'Fetching token...' : 'Join meeting'}
-        </Button>
-      </CardFooter>
-    </Card>
+          {!forceFetchToken && (
+            <Field label="Fetch meeting token">
+              <BooleanInput onChange={(e) => setFetchToken(e.target.checked)} />
+            </Field>
+          )}
+          {fetchToken && !forceOwner && (
+            <Field label="Join as owner">
+              <BooleanInput onChange={(e) => setOwner(e.target.checked)} />
+            </Field>
+          )}
+        </CardBody>
+        <CardFooter divider>
+          <Button
+            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>
-          <footer>{waiting ? showWaitingMessage : showUsernameInput}</footer>
+          <form onSubmit={(e) => {
+            e.preventDefault();
+            joinCall(userName);
+          }}>
+            <footer>{waiting ? showWaitingMessage : showUsernameInput}</footer>
+          </form>
         </div>
 
         <style jsx>{`

custom/text-chat/components/ChatAside.js

@@ -57,25 +57,28 @@ export const ChatAside = () => {
           </div>
         ))}
       </div>
-      <footer className="chat-footer">
-        <TextInput
-          value={newMessage}
-          placeholder="Type message here"
-          variant="transparent"
-          onChange={(e) => setNewMessage(e.target.value)}
-        />
-        <Button
-          className="send-button"
-          variant="transparent"
-          disabled={!newMessage}
-          onClick={() => {
-            sendMessage(newMessage);
-            setNewMessage('');
-          }}
-        >
-          Send
-        </Button>
-      </footer>
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage(newMessage);
+        setNewMessage('');
+      }}>
+        <footer className="chat-footer">
+          <TextInput
+            value={newMessage}
+            placeholder="Type message here"
+            variant="transparent"
+            onChange={(e) => setNewMessage(e.target.value)}
+          />
+          <Button
+            className="send-button"
+            variant="transparent"
+            disabled={!newMessage}
+            type="submit"
+          >
+            Send
+          </Button>
+        </footer>
+      </form>
       <style jsx>{`
         .messages-container {
           flex: 1;