diff --git a/src/bootstrap/Input.js b/src/bootstrap/Input.js index 658522a..8cd0b59 100644 --- a/src/bootstrap/Input.js +++ b/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 (
@@ -49,14 +51,17 @@ export function Input({ className={inputClassName} type={type} id={uid} + onFocus={() => setErrorFeedbackState(true)} {...props} /> {children}
- {error ?
{error}
: null} - {helpText ? ( + {errorFeedbackIsVisible && ( +
{error}
+ )} + {helpText && ( {helpText} - ) : null} + )} ); }