primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.56k stars 4.61k forks source link

p-inputNumber -- deprecated keyCode and which used when checking for keypress and keydown #13439

Open jiyeol-lee opened 1 year ago

jiyeol-lee commented 1 year ago

Describe the bug

for the keyboardEvent, which and keyCode is deprecated and it's recommended to use key.

For example

onInputKeyDown(event) {
  if (this.readonly) {
    return;
  }
  this.lastValue = event.target.value;
  if (event.shiftKey || event.altKey) {
    this.isSpecialChar = true;
    return;
  }
  let selectionStart = event.target.selectionStart;
  let selectionEnd = event.target.selectionEnd;
  let inputValue = event.target.value;
  let newValueStr = null;
  if (event.altKey) {
    event.preventDefault();
  }

  // we should use "event.key" in here
  // original code uses "event.which"
  switch (event.key) {
    //up
    case 'ArrowUp':
      // ...
      break;
    //down
    case 'ArrowDown':
      // ...
      break;
    //left
    case 'ArrowLeft':
      // ...
      break;
    //right
    case 'ArrowRight':
      // ...
      break;
    //enter
    case 'Enter':
      // ...
      break;
    //backspace
    case 'Backspace': {
      // ...
      break;
    }
    // del
    case 'Delete':
      // ...
      break;
    default:
      break;
  }
  this.onKeyDown.emit(event);
}

onInputKeyPress(event) {
  if (this.readonly) {
    return;
  }
  event.preventDefault();
  // so we can just use "event.key"
  // and change "48 <= code && code <= 57" to "/^\d$/.test(char)"
  let code = event.which || event.keyCode;
  let char = String.fromCharCode(code);
  const isDecimalSign = this.isDecimalSign(char);
  const isMinusSign = this.isMinusSign(char);
  if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
    this.insert(event, char, { isDecimalSign, isMinusSign });
  }
}

Environment

I was testing using @testing-library/dom and @testing-library/user-event and tried to type on inputNumber tag but nothing works because @testing-library did not implement keyboard event for which and keyCode. Once I change them to key, my test cases pass like magic.

Reproducer

No response

Angular version

14.2.3

PrimeNG version

14.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

ALL

Steps to reproduce the behavior

No response

Expected behavior

No response

NateRadebaugh commented 2 weeks ago

@cagataycivici are you open to a PR to fix this? Is this in scope for the v18 release?

I understand accessibility is documented as being supported, but it seems to mostly be related to contrast and does not clarify details of keyboard support

https://primeng.org/guides/accessibility

NateRadebaugh commented 1 week ago

Looks like that PR that was closed without merging is still the right fix and was not applied to the latest codebase.