Call onBlur on custom Input with Controller to save form

[kurdin]

I am using latest 6.x version. How can I call onBlur with Controller as Input to handle save form without clicking a button ? I changed mode to onBlur and all but it is not working. Custom Input handle onBlur without Controller just fine.

This is working and single Input handles onBlur just fine

<Input
    onBlur={() => {
        console.log('onBlur');
    }}
/>

This is not working, onBlur never fired in both cases (Input nor Controller)

<Controller
placeholder={placeholder ? placeholder : resetValue.toString()}
size="small"
as={
    <Input
        onBlur={() => {
            console.log('onBlur on Input');
        }}
    />
}
min="0"
onKeyDown={handleKeyDownEnter}
onBlur={() => {
    console.log('onBlur on Controller');
}}
type={isInputNumber ? 'text' : 'text'}
className={styles.input_dropdown}
rules={rules}
name={name}
control={control}
/>

btw, onKeyDown works and I can save form on catching press Enter key event but I want to do the same onBlur. This is a blocker for me.

Sorry I could not create codesandbox because my custom Input not published anywhere.

[bluebill1049]

why not using render props? then you will have the full control and assign your action with onBlur.

[bluebill1049]

https://github.com/react-hook-form/react-hook-form/releases/tag/v6.0.0-rc.2

[kurdin]

@bluebill1049 let me try this, thanks for a quick reply !

[kurdin]

@bluebill1049 render props work fine with onBlur
Thanks you for react-hook-form!

[bluebill1049]

awesome! we will release V6 in the next following days.

[kurdin]

For anyone looking to make onBlur event to trigger custom method, you can do it using render prop on Controller like this

<Controller
render={({ onChange, onBlur, value }) => (
  <CustomInput  
    onKeyDown={handleKeyDownEnter}
    className={styles.Input}
    value={value}
    onBlur={() => {
      console.log('onBlur on Input');
    }}
  />
}
rules={rules}
name={name}
control={control}
/>