Hello,
I'm having trouble using the onblur in an input because it is not being triggered on loosing focus of the element but on change of the data entered. My code is below for further referene, I was thinking may be the validator is triggering this behavior? some help would be appreciated.
const MyContext = React.createContext({
updateCompNickname: (value: any) => { },
updateCompSerialNo: (value: any) => { },
postCompressorSave: (value: any) => { }
});
/**
* Validator
*/
const inputRegex = new RegExp(/^([a-zA-Z\d\.,%/\-_ ].*)/);
const inputValidator = (value: any) => inputRegex.test(value) ? "" : "Please enter a valid value.";
const NicknameInput = (fieldRenderProps: any) => {
const { validationMessage, visited, onChange, ...others } = fieldRenderProps;
const currentContext = React.useContext(MyContext);
return (
<div>
<label htmlFor="nickname-name" className="text-info, label-add-compressors">Nickname</label>
<Input type="text" name="nickname" placeholder=""
style={{ height: "30px" }}
onBlur={currentContext.postCompressorSave}
onChange={e => {
fieldRenderProps.onChange(e) // call the Form onChange and then execute any custom logic
currentContext.updateCompNickname(e.value);
}}
{...others} />
{visited && validationMessage && <Error>{validationMessage}</Error>}
</div>
);
};
constAddCompData = () => {
return (
<div >
{<MyContext.Provider
value={{
updateCompNickname: updateCompNickname,
updateCompSerialNo: updateCompSerialNo,
postCompressorSave: postCompressorSave
}}
>
<fieldset className={"k-form-fieldset"}>
<div className="mb-3">
<Field
name={"nickname"}
component={NicknameInput}
validator={inputValidator}
/>
</div>
</div>
)
}
export default AddCompData
