Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(useKeyPress): make alias of keyCode more compatible #2054

Closed
wants to merge 9 commits into from

Conversation

liuyib
Copy link
Collaborator

@liuyib liuyib commented Feb 12, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

close: #1467

💡 Background and solution

background:

  1. some event.keyCode are different between Chrome and Firefox.
  2. some keyCode alias in useKeyPress is not compatible with Firefox.

solution:
set the value of aliasKeyCodeMap to array, e.g.

const aliasKeyCodeMap = {
    // others ...
    semicolon: [186, 59], // 59: firefox
    equalsign: [187, 61], // 61: firefox
    // others ...
};

📝 Changelog

Language Changelog
🇺🇸 English Supplement the value that keyCode is not compatible
🇨🇳 Chinese 补充 keyCode 未兼容到的值

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@CLAassistant
Copy link

CLAassistant commented Feb 12, 2023

CLA assistant check
All committers have signed the CLA.

@liuyib liuyib changed the title Fix use key press fix(useKeyPress): some keyCode aliases is not compatible with Firefox Feb 12, 2023
@liuyib
Copy link
Collaborator Author

liuyib commented Feb 12, 2023

@miracles1919 @crazylxr review, please ❤️

@miracles1919
Copy link
Collaborator

keyCode 兼容 Firefox 的文档有吗 @liuyib

@liuyib
Copy link
Collaborator Author

liuyib commented Feb 16, 2023

keyCode 兼容 Firefox 的文档有吗 @liuyib

有:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#value_of_keycode,各个操作系统,各个浏览器下的数据都有。

image


之前实现这个 PR 时,我是参考的一个非官方的文档:https://unixpapa.com/js/key.html,
看了上面的 MDN 文档,感觉还有一些键没有做好兼容,我回头对比着 MDN 详细完善一遍。

另外,keyCode 已经废弃了,而且各个平台差异繁多,还有必要在 keyCode 方案上做努力吗?其他的 hooks 库目前采用 e.keye.code 结合的方案:

ahooks 有没有考虑切换至“e.keye.code”的方案? @miracles1919

@miracles1919
Copy link
Collaborator

keyCode 兼容确实麻烦,但是替换的话改动比较大了。v3 不考虑了,可以 v4 再切换

@liuyib
Copy link
Collaborator Author

liuyib commented Feb 18, 2023

参考 MDN 上 keyCode 的兼容性表,全部核对了一遍,补充了下面这些键的兼容值:

image

可以 review 下 @miracles1919

@liuyib liuyib changed the title fix(useKeyPress): some keyCode aliases is not compatible with Firefox fix(useKeyPress): make alias of keyCode more compatible Feb 18, 2023
@crazylxr crazylxr added this to Review in progress in ahooks tasks Feb 22, 2023
@miracles1919
Copy link
Collaborator

leftwindowkey/rightwindowkey 为例,Window 环境

  • Chrome 是 91/92
  • Safari 是 91/93
  • Firfox 是 91/91

... 兼容起来太麻烦了,维护成本也高,我建议是在下个版本用 key 方案,这个 PR 我先关了~

ahooks tasks automation moved this from Review in progress to Done Feb 23, 2023
@liuyib liuyib deleted the fix_useKeyPress branch February 23, 2023 02:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

useKeyPress 在 firfox 下的兼容问题
4 participants