OnBlur

The onBlur event occurs when an object loses focus. In the example below, when when the EasyEdit component loses focus then the word "blur" is displayed in the browser's console because of the custom function that's passed in the onBlur prop.

<EasyEdit
    type="text"
    value="Test onBlur (check your console!)"
    onSave={() => console.log("saved")}
    onBlur={() => console.log("blur")}
/>

Auto-saving onBlur

You can configure an EasyEdit component to auto-save its value when it loses focus.

<EasyEdit
    type="text"
    value="Auto-submit onBlur"
    onSave={() => console.log("saved")}
    saveOnBlur
/>

if the saveOnBlur prop is set to true then both Save and Cancel buttons will be hidden by default as technically, if you try to click any of the two buttons the input component will lose focus which will trigger the onBlur event

Cancelling onBlur

You can also configure an EasyEdit component to cancel editing when it loses focus.

<EasyEdit
    type="text"
    value="Auto-submit onBlur"
    onSave={() => console.log("saved")}
    cancelOnBlur
/>