Display input's error feedback only after focus

src/bootstrap/Input.js

@@ -1,11 +1,11 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { useUID } from "react-uid";
 import PropTypes from "prop-types";
 
@@ -36,8 +36,10 @@ export function Input({
     ...props
 }) {
     const uid = useUID();
+    const [initialErrorFeedbackState, setErrorFeedbackState] = useState(false);
+    const errorFeedbackIsVisible = !!(initialErrorFeedbackState && error);
     const inputClassName = `form-control ${className || ""} ${
-        error ? "is-invalid" : ""
+        errorFeedbackIsVisible ? "is-invalid" : ""
     }`.trim();
     return (
         <div className="form-group">
@@ -49,14 +51,17 @@ export function Input({
                     className={inputClassName}
                     type={type}
                     id={uid}
+                    onFocus={() => setErrorFeedbackState(true)}
                     {...props}
                 />
                 {children}
             </div>
-            {error ? <div className="invalid-feedback">{error}</div> : null}
-            {helpText ? (
+            {errorFeedbackIsVisible && (
+                <div className="invalid-feedback">{error}</div>
+            )}
+            {helpText && (
                 <small className="form-text text-muted">{helpText}</small>
-            ) : null}
+            )}
         </div>
     );
 }