Fix bug in mobile, when typing in a

form and hitting enter doesn't show validation errors

Author: timiscoding

client/src/components/Blog/Comments/CommentFormView.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components/macro";
 import FormBase from "../../Form";
@@ -11,8 +11,13 @@ const Form = styled(FormBase)`
   padding: 10px;
 `;
 
-const CommentForm = ({ onComment, pending }) => {
+const CommentForm = ({ onComment, pending, toggleableOpen }) => {
   const formRef = useRef();
+  useEffect(() => {
+    if (toggleableOpen) {
+      formRef.current.focus();
+    }
+  }, [toggleableOpen]);
 
   const handleSubmit = async ({ comment }) => {
     const action = await onComment(comment);
@@ -31,6 +36,7 @@ const CommentForm = ({ onComment, pending }) => {
               valid={validity.comment}
               error={errors.comment}
               placeholder="Comment on this blog"
+              autoComplete="off"
             />
           </Form.Group>
           <Row cols={1}>
@@ -51,7 +57,7 @@ const CommentForm = ({ onComment, pending }) => {
 
 CommentForm.propTypes = {
   onComment: PropTypes.func.isRequired,
-  pending: PropTypes.bool
+  pending: PropTypes.bool,
 };
 
 export default CommentForm;

client/src/components/Blog/Comments/CommentsContainer.js

@@ -12,12 +12,12 @@ import {
   Heading,
   Actions,
   SortDropdown,
-  Toggleable
+  Toggleable,
 } from "./styled/CommentsContainer";
 
 const SORT_OPTIONS = [
   { value: "createdAt-desc", title: "By newest first" },
-  { value: "createdAt-asc", title: "By oldest First" }
+  { value: "createdAt-asc", title: "By oldest First" },
 ];
 
 const SORT_BY_NEWEST = SORT_OPTIONS[0].value;
@@ -30,7 +30,7 @@ const CommentsContainer = ({
   fetchComments,
   page,
   history,
-  location
+  location,
 }) => {
   const commentFormRef = useRef();
   useEffect(() => {
@@ -39,7 +39,7 @@ const CommentsContainer = ({
     const sort = params.get("sort") || SORT_BY_NEWEST;
     fetchComments({ blogId: match.params.id, page, sort });
   }, [fetchComments, match.params.id, location]);
-  const handleComment = comment =>
+  const handleComment = (comment) =>
     addComment(match.params.id, comment, history);
   const handleChange = (type, value) => {
     const params = new URLSearchParams(location.search);
@@ -59,7 +59,7 @@ const CommentsContainer = ({
       <Actions>
         <SortDropdown
           options={SORT_OPTIONS}
-          onChange={sort => handleChange("sort", sort)}
+          onChange={(sort) => handleChange("sort", sort)}
           defaultValue={
             new URLSearchParams(location.search).get("sort") || SORT_BY_NEWEST
           }
@@ -69,25 +69,31 @@ const CommentsContainer = ({
           buttonIcon={AddIcon}
           ref={commentFormRef}
         >
-          <CommentForm onComment={handleComment} pending={isCommenting} />
+          {(open) => (
+            <CommentForm
+              onComment={handleComment}
+              pending={isCommenting}
+              toggleableOpen={open}
+            />
+          )}
         </Toggleable>
       </Actions>
       <CommentList comments={page?.items} pending={pending} />
       <Pager
         currentPage={page?.currentPage}
         lastPage={page?.lastPage}
         maxNavPages={6}
-        onClick={page => handleChange("page", page)}
+        onClick={(page) => handleChange("page", page)}
         pending={pending}
       />
     </div>
   );
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   isCommenting: selectors.getPending(state, actionTypes.ADD_COMMENT_REQUEST),
   isFetching: selectors.getPending(state, actionTypes.FETCH_COMMENTS_REQUEST),
-  page: selectors.getPage(state, actionTypes.FETCH_COMMENTS_REQUEST)
+  page: selectors.getPage(state, actionTypes.FETCH_COMMENTS_REQUEST),
 });
 
 export default connect(mapStateToProps, { addComment, fetchComments })(

client/src/components/Form/Control/ControlView.js

@@ -9,11 +9,14 @@ const ControlView = ({
   value,
   error,
   onChange,
+  onKeyPress,
   valid,
   id,
   type,
   noValidStyle,
-  placeholder
+  placeholder,
+  autoFocus,
+  autoComplete,
 }) => {
   return (
     <>
@@ -22,8 +25,11 @@ const ControlView = ({
           id={id}
           value={value}
           onChange={onChange}
+          onKeyPress={onKeyPress}
           valid={valid}
           placeholder={placeholder}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
         />
       ) : (
         <Input
@@ -33,8 +39,11 @@ const ControlView = ({
           onClear={onClear}
           value={value}
           onChange={onChange}
+          onKeyPress={onKeyPress}
           valid={valid}
           placeholder={placeholder}
+          autoFocus={autoFocus}
+          autoComplete={autoComplete}
         />
       )}
       <InputError>{error}</InputError>
@@ -49,7 +58,7 @@ ControlView.propTypes = {
   value: PropTypes.string.isRequired,
   valid: PropTypes.bool,
   error: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
 };
 
 export default ControlView;

client/src/components/Login/LoginFormView.js

@@ -14,7 +14,7 @@ const LoginFormView = ({ onLogin, pending }) => {
   const handleSubmit = ({ username, password }) => {
     onLogin({
       username,
-      password
+      password,
     });
   };
 
@@ -71,7 +71,7 @@ const LoginFormView = ({ onLogin, pending }) => {
 
 LoginFormView.propTypes = {
   onLogin: PropTypes.func.isRequired,
-  pending: PropTypes.bool
+  pending: PropTypes.bool,
 };
 
 export default LoginFormView;