react-code-input icon indicating copy to clipboard operation
react-code-input copied to clipboard

Fix issues around pasting into ReactCodeInput

Open acusti opened this issue 4 years ago • 1 comments

note that this branch was branched off of #153 and will be easier to review in isolation from those changes.


fixed some issues around pasting, including:

  • Update focus to input after last pasted value or last input, fix #70 631bae4
  • Use type="text" when props.type is 'number' to avoid browser bugs b65e90e
    • fixes #62 (reproducible in chrome and safari also)
    • removes need for special keydown handling for ↑/↓/E keys
    • removes need for extra styles to remove default input type="number" browser styles
    • leaves filtering of non-numeric values to existing logic in the component’s handleChange method. this works for both pasted text and keyboard entry thanks to the input type being text; when input type is number, paste doesn’t trigger a react onChange event and it is impossible to get the behavior 100% correct (inputElement.value is empty even when it actually has characters in it, e.g. the letter e)
  • Remove maxLength from the inputs so filtered pasted values aren’t truncated 3403072
    • when using maxLength, if user has copied the text "123 456" and pastes it into an input rendered by ReactCodeInput with fields={6}, the last digit (“6”) won’t be pasted because the max length on the focused input is 6 digits

acusti avatar Oct 14 '21 06:10 acusti

Codecov Report

Merging #154 (1236d1f) into master (2599c5d) will increase coverage by 1.15%. The diff coverage is n/a.

:exclamation: Current head 1236d1f differs from pull request most recent head 3403072. Consider uploading reports for the commit 3403072 to get more accurate results Impacted file tree graph

@@            Coverage Diff             @@
##           master     #154      +/-   ##
==========================================
+ Coverage   96.55%   97.70%   +1.15%     
==========================================
  Files           2        2              
  Lines         145      131      -14     
  Branches       41       35       -6     
==========================================
- Hits          140      128      -12     
+ Misses          5        3       -2     
Impacted Files Coverage Δ
src/ReactCodeInput.js
src/utils.js
utils.js 100.00% <0.00%> (ø)
ReactCodeInput.js 97.63% <0.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 2599c5d...3403072. Read the comment docs.

codecov[bot] avatar Oct 14 '21 06:10 codecov[bot]