don't calculate pixel width of input #694
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I'm probably missing something, as there is no visual test for this functionality, but.
You currently have a great deal of code to calculate exact pixel width of helper INPUT element and it's doing good job. However, I think that almost the same functionality with little bit better compatibility with accessibility displays and other rare cases, as well as with much less code can be obtained by using well supported
ch
unit.ch
is a width of0
in current font and it's not exact measurements of value string width, but you are usingpre
and magic number of 75% in this function anyway, so this variant can be tuned in similar way (something likelength * 0.75
should be pixel perfect) if you want. For my taste, I will leave it like this.Also found that current tests are using non-existent
_placeholderValue
property, but still passing well 🧐Unfortunately, this functionality can't be tested with JSDOM due to lack of ch support there (I've filled appropriate Pull Request), so, I've tested by temporary using
em
units, and also manually in browser.Now, it's up to you, as it's not pixel perfect and have some edge case where it leaves a little of space at the end on some strings. But I ❤️ this solution.