onBlur event

[VinceG]

Describe the bug
the onBlur function prop only provides the temp value as an argument, it should also pass in the native event so we can see which target was clicked.

this is helpful to be able to determine if they clicked the save/cancel buttons and either perform a save on blur or cancel on blur.

right now if we want to just use cancelOnBlur but be able to still press the save button to save the data we can't it just always cancels on blur even if you click on the save button.

https://codesandbox.io/s/react-easy-edit-sandbox-forked-2ort4y?file=/index.js

To Reproduce
Steps to reproduce the behavior:

      <EasyEdit
        type={Types.TEXT}
        onSave={save}
        onCancel={cancel}
        cancelOnBlur={true}
        saveButtonLabel="Save Me"
        cancelButtonLabel="Cancel Me"
        attributes={{ name: "awesome-input", id: 1 }}
        instructions="Star this repo!"
      />

Expected behavior
onBlur should pass in the native event or cancelOnBlur should not trigger cancel if the on save is pressed

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 111

[pavelee]

Hey, is it still open to investigate?

[giorgosart]

Yes @pavelee

[pavelee]

I will look into it. It's little bit tricky but I will try to make proposal 😇

[MaheshTrapasiya]

@giorgosart
Can we delay the on blur event so it can process the save method?

IF Yes i can create a PR with same

[giorgosart]

@MaheshTrapasiya how are you going to achieve that?

[MaheshTrapasiya]

@MaheshTrapasiya how are you going to achieve that?

Using setTimeout or debounce for 500 ms?

[MaheshTrapasiya]

@giorgosart any suggestions on this?
Actually i have implemented this package in one of my project and i am stuck with this issue.

[pavelee]

@MaheshTrapasiya I need some more time to find possible solutions. 🙏

Default timeout is not solution for everyone who relay on this feature. Will be consider as a bug for them. 😕

We have conflict here because cancel on blur was design to cancel on blur. Did you consider to check if save on blur would work for you?

Maybe it cloud be helpful if you describe your business case to solve

[pavelee]

I analyzed problem again, my proposal is to catch when we user mouseover save button, if that is the case, just don't let to trigger cancel on blur.

Edge case is mobile device. Not sure if that would be possible to catch as well, need to find the way.

That's the best possible solution i've found. I would like to avoid any timeout solutions.

If there is no objections, I will try to prepare PR with proposal.

[giorgosart]

Hi @pavelee it would be good to try and see what you have in mind.

[pfurini]

I analyzed problem again, my proposal is to catch when we user mouseover save button, if that is the case, just don't let to trigger cancel on blur.

Edge case is mobile device. Not sure if that would be possible to catch as well, need to find the way.

That's the best possible solution i've found. I would like to avoid any timeout solutions.

If there is no objections, I will try to prepare PR with proposal.

@pavelee What about touch then? We can't rely on mouseover on touch devices...