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")}
/>
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 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
/>
Last modified 3yr ago