# 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. 

```jsx
<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.

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

{% hint style="danger" %}
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&#x20;
{% endhint %}

### Cancelling onBlur

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

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