BR-Mask Bug Phone

Introduction

BR-Mask is a popular Javascript library used for input mask formatting. However, a bug has been discovered which causes issues when used on mobile devices. When focused on the input field, the mobile keyboard will push the element up, causing the mask to be misaligned and unusable.

Reproduction Steps

1. Install and import BR-Mask in your web project
2. Add an input element with a mask format (example: <input type="text" id="phone" data-mask="(00) 0000-0000" />)
3. Test the input field on a mobile device (example: iPhone)
4. Click on the input field to focus, keyboard should appear
5. Observe that the input mask is misaligned and unusable

Solution

One suggested solution is to add a "scroll" event listener to the input field, so that whenever the keyboard is shown, the mask will be repositioned to the correct location. Example code below:

// Get the input element
const input = document.getElementById('phone');

// Add a "scroll" event listener to the input element
input.addEventListener('scroll', () => {
  // Check if the input field is currently focused
  if (document.activeElement === input) {
    // Reposition the mask
    const rect = input.getBoundingClientRect();
    input.style.position = "fixed"; // temporarily change position to fixed to prevent scrolling
    input.style.top = window.innerHeight - rect.bottom + "px";
    input.style.position = ""; // reset position
  }
});

Conclusion

The BR-Mask bug on mobile devices can cause frustration and confusion for users. Adding a scroll event listener can help alleviate this issue, ensuring that the input mask remains visible and usable.