Verified Commit 8c929bae authored by Aleksandr Gumroian's avatar Aleksandr Gumroian 🚀
Browse files

Display input's error feedback only after focus

parent 02f2c5be
Pipeline #79605 failed with stages
in 1 minute and 27 seconds
/*
* 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>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment