reaviz / reakeys Goto Github PK
View Code? Open in Web Editor NEW⌨️ React Hotkeys Hook. Maintained by @goodcodeus.
Home Page: https://reaviz.github.io/reakeys/
License: Apache License 2.0
⌨️ React Hotkeys Hook. Maintained by @goodcodeus.
Home Page: https://reaviz.github.io/reakeys/
License: Apache License 2.0
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
When looking into #16 I noticed in the examples that listeners attached to an element are not properly cleaned. They get duplicated so you may have a listener that's fired multiple times with old values.
That could indicate a memory leak.
I was expecting to have only one listener on a given element: the current one.
https://stackblitz.com/edit/react-ts-qmxaq3?file=App.tsx
Libs:
- react version: latest
- reakeys version: latest
Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
With the new installation of Reaflow I got an infinite loop:
which happens if using useUndo or useSelection (maybe more)
After a few hours of searching, I found that the problem is with this package.
The last working version is 1.2.2
Install reaflow - call useSelection like this -
function onDataChange(): any {}
const { selections } = useSelection({
nodes: [],
edges: [],
onDataChange,
});
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
When memoizing the array that's passed to useHotkeys
, the listeners are not re-attached when a ref from the array is updated.
That's because refs are mutable, so there's no "re-render" triggered when they are updated.
I would expect the listeners to be attached to the ref I am passing.
https://stackblitz.com/edit/react-ts-fsaxks?file=App.tsx
I think that asking for a RefObject
suggests that you can swap it on the fly and it will just work. The truth is that it needs to act more like a state, where an update triggers a re-render.
There's another issue that's caused by this: https://stackblitz.com/edit/react-ts-tzrezy?file=App.tsx,style.css (EDIT: created #19 for that one).
Libs:
- react version: X.Y.Z
- reakeys version: X.Y.Z
Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
The requirement I am facing is a hotkey that's triggered by a combination of SHIFT + +
useHotkeys([{name: 'hotkey', keys: ['shift++']);
This above doesn't work and it seems to be a problem in most hotkey libraries, and the way it's solved is with specifying different combination key for use cases like this.
Being able to use shift and + to trigger a callback
useHotkeys([{name: 'hotkey', keys: ['shift++']);
This'll allow more combinations and be able to use these characters (-, +) in combinations
Thanks for elegant library, really wanna use it, and I could help with this issue if it is feasible.
Mousetrap is old and not maintained anymore. We should move off of it for NextJS support. Some alternatives:
Key features we are using in mousetrap ( beyond simple binding ):
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
A's key listener don't work anymore.
I would expect A's listeners to not be overwritten anymore and thus work.
https://stackblitz.com/edit/react-ts-3rlpgx?file=App.tsx
We have a similar use case as the reproduction. A modal overwrites others shortcuts and when it's removed, the listeners are not re-attached (it's not re-rendered).
Libs:
- react version: latest
- reakeys version: latest
Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
Currently in utils.ts the navigator variable access is not protected against being undefined (for example during SSR with Gatsby)
If navigator variable does not exist, just return isMac = false
Support SSR rendering
Libs:
- react version: 17.x.x
- reakeys version: 1.2.9
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
- [ X ] SSR
For Tooling issues:
- Node version: XX
- Platform:
Others:
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
Imagine you want to attach keyboard shortcuts to a specific element. But that element is not part of the DOM initially (e.g because it's loading). So the ref object that's passed to useHotkeys
has { current: null }
. Currently, this makes the shortcuts global.
I would expect the keyboard shortcuts to only be attached to the element I am providing. And so they should be disabled when the element doesn't exist.
https://stackblitz.com/edit/react-ts-tzrezy?file=App.tsx
This one shouldn't be too hard to fix, it's just a matter of making the difference between:
{ ref: undefined }
-> global{ ref: { current: null } }
-> disabled, element is null{ ref: { current: HTMLElement } }
-> attached to element
Libs:
- react version: latest
- reakeys version: latest
Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
At this time, it is possible to register new shortcuts using useHotkeys
, but it doesn't see possible to unregister shortcuts.
Maybe it's possible but not documented? (is that what the name
property is for?)
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:
It's currently impossible to disable existing keybindings- for example, this:
{
ref: menuRef,
name: '',
keys: ['*'],
callback: () => false
}
This won't prevent parents' shortcuts from triggering when their key combo is pressed on the keyboard. This may be a limitation of Mousetrap, or maybe I'm just not using it correctly.
I should be able to disable all outside keybindings
Headless UI uses a focus trap that will crash the application if you have more than one dialog open at a time. My context menu uses a focus trap, so if someone uses a keyboard shortcut to open a dialog, the application will crash and the entire tree will unmount. Not very fun.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.