Hi @Sagar R,

To fix the issue with the InputNumberMask not binding the value correctly after pasting content with line breaks, you can try the following:

1) Use JavaScript to sanitize input:

Add a JavaScript block that listens for the onPaste event, removes line breaks, and updates the input field value accordingly. Here’s an example:

document.querySelectorAll('input').forEach(input => {

   input.addEventListener('paste', function(e) {

      e.preventDefault();

      let pasteData = (e.clipboardData || window.clipboardData).getData('text');

      pasteData = pasteData.replace(/\n|\r/g, ''); // Remove line breaks

      document.execCommand('insertText', false, pasteData);

   });

});

2) Use OnChange event:

If the issue persists, ensure you’re handling the OnChange event properly. This event ensures that the value gets updated when the user clicks outside of the input field. Ensure that the widget’s variable is being refreshed upon change.

3) Update the Input Mask Reactive component:

If none of the above works, check for any updates in the Forge for the Input Mask Reactive component. The latest version might have bug fixes that resolve this issue.

Let me know if this resolves the issue!

Hi @Sagar R, 

• Remove Line Breaks Before Pasting:

  • One solution is to preprocess the pasted content to remove line breaks before it reaches the input field.
  • You can use JavaScript to listen for the paste event and strip out any line breaks:

    javascript:
    document.getElementById('your-input-id').addEventListener('paste', function(e) {    e.preventDefault();    var text = e.clipboardData.getData('text/plain').replace(/[\r\n]+/g, '');    document.execCommand('insertText', false, text);});

  • Replace 'your-input-id' with the actual ID of your input element.

• Use the OnChange Event to Handle Line Breaks:

  • You can use the OnChange event of the input widget in OutSystems to handle the pasted text and remove any unwanted characters.
  • For example, in the OnChange action, you can use the Replace function to remove line breaks:

    Replace(InputText, "\n", "")

  • This approach will clean up the input after the user pastes the content.

• Custom JavaScript or CSS:

  • You can inject custom JavaScript or CSS to modify the behavior of the input mask widget to handle line breaks more gracefully.
  • For instance, use CSS to set the input to single-line:

    code#your-input-id {    white-space: nowrap;    overflow: hidden;}

  • This prevents the input from displaying multi-line content.

• Try a Different Mask Plugin:

  • If line breaks are a common issue, consider using a different input mask plugin that might handle this scenario better or modifying the existing widget’s JavaScript code.

• Validation and Error Handling:

  • If removing line breaks is not feasible, add validation to display an error message when line breaks are detected.
  • Use the ValidationMessage and ValidationRule to inform the user that the input should not contain line breaks.