RobinHerbots/Inputmask

The default value is not shown completely with the "text-overflow: ellipsis" style

Myshanyatko opened this issue · 0 comments

If input has

  • inputMask
  • style "text-overflow: ellipsis"
  • long (not fitting into the input) default value

Input doesn't show the value until you click on it. If the value is shorter, only part of it is shown (instead of '12345678901234567890...' here '901234567890...').

import Inputmask from 'inputmask';

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
      <h1>Bug ellipsis</h1>
      <p>Click on input</p>
      <input 
        id="input" 
        style="text-overflow: ellipsis"
      />`;

var input1 = document.getElementById('input');

input.value = '1234567890123456789012345678901234567890123';

new Inputmask({ mask: '9{*}' }).mask(input1);

https://stackblitz.com/edit/js-inputmask-kpr99k?file=index.js
OS: Windows
Browser : Google
Inputmask version: 5.0.9