15
Views
2
Comments
[Input Mask React] Trigger blur action to save currency value (for copy-paste)
inputmask-react
Reactive icon
Forge component by João Barata
Application Type
Reactive

I've already found a couple old issues related to pasting values in a masked field. They seem to be solved, but the pasted values are apparently only updated in the blur-event of the input (https://www.outsystems.com/forums/discussion/58729/problem-with-copy-paste-in-masked-input/#Post295105).

Before, we saved the values directly to the database in case of either:

1.  a blur-event on the input
2. 1000ms after user stopped typing

We found when defining our own blur-event (to save value to the db), the pasted value of the field is not correctly updated. Maybe the currency value is already saved before being updated by the mask widget?

Automatically saving a value thus cannot be done because:

a. we cannot use the standard blur-event because it conflicts with the mask widget update
b. we cannot save 1000ms after typing because the value is not updated until the blur is triggered

How could we tack this issue?


hii @Geertjan Jacobs,

You can use a JavaScript setTimeout function to introduce a delay after the user stops typing. This way, you can ensure that the value is updated before saving it to the database.



----------------------------------------------------------------JS code :------------------------------------------

var timeout;

// Assuming 'yourInput' is the ID of your input field

document.getElementById('yourInput').addEventListener('input', function() {

    clearTimeout(timeout);

    timeout = setTimeout(function() {

        // Save the value to the database here

    }, 1000);

});


I have tried this at my side and it is working as expected.



Kind regards,

Sanjay Kushwah


 

Hi Sanjay,

Thanks for your reply. We actually do save 1000ms after typing stopped as pointed out in point 2 of my post.
The issue is when a value is pasted (not typed) in the input field, it is not updated until you click outside the field and the blur event is triggered. And because of this behavior, unless the user explicitly clicks outside the field the old value is still 'in memory' and thus saved to the database.

Below is a gif of the InputMaskReactive demo showing how the 'Received value' of a pasted value is only updated when clicking outside the field (regardless of type: currency, percentage and number).

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.