onblur not working as expected in input

1 Answer 118 Views

Input

Daniela asked on 22 Mar 2022, 09:30 AM

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

1 Answer, 1 is accepted

Daniela

commented on 22 Mar 2022, 10:22 AM

I cannot install the dependencies in stackblitz , could you please clarify how can I upload the code there?

Stefan

commented on 22 Mar 2022, 11:20 AM

Hello,

Stackblick will automatically install any dependencies.

You can also use my project as a starting point and only modify the code.

Daniela

commented on 22 Mar 2022, 12:18 PM

Hello,

I have added the code of the onblur still not working in this example https://stackblitz.com/edit/react-ts-1n6chp?file=index.tsx

for some reason some of the libs are not recognized, I would appreciate if you fix that and run it, thanks.

Regards,

Stefan

commented on 22 Mar 2022, 01:08 PM

Hello,

I found a couple of places that can cause an error in the example:

1) The component App is made as a class component, but it is using hooks inside of it which is not supported by React.

2) The Field component is rendered without a Form component which is a requirement.

I could be able to fix the example, but then it will be very different from the one provided.

We will be very happy to help and we need a working example with the issue in order to provide a fix for it. We already provided a fully working example in the first reply with an Input and an onBlur event.

Daniela

commented on 22 Mar 2022, 01:46 PM

Hello,

You are right, I was trying to create it from a template and it was wrong for my case, I have modified your example with my code and now it fails https://stackblitz.com/edit/react-oeacej-pmpk9m?file=app/main.jsx the onblur does not work in that scenario.

Stefan

commented on 22 Mar 2022, 02:05 PM

Hello,

Thank you for the example. I was able to locate the issue. The reason is that we pass onBlur in the props (others). That will overwrite the onBlur that you have set.

We recommend passing others first to ensure that they will not overwrite your code. Also, ensure that you call the props method inside the custom onBlur to ensure that our built-in logic will be executed also. I updated the example to showcase that:

https://stackblitz.com/edit/react-oeacej-prltc4?file=app/main.jsx

Daniela

commented on 23 Mar 2022, 08:27 AM

that worked, thanks!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

onblur not working as expected in input

1 Answer, 1 is accepted