key attribute of x-shortcut conflicts with react's key attribute

[rockiger]

It seems to me, that the key attribute for the x-shortcut is "misread" by react as an identification key. This way I can't display shortcuts correctly. I can only display the modifiers, but the character of the shortcut is not shown (see picture).

Is it possible to rename the key attribute to char or val?

FYI, I am not using react directly, but with Clojurescript and Reagent. IMO the problem should persist with JSX.

[jarek-foksa]

The current declarative API feels a bit awkward, I think I should change it to something like this:

<x-shortcut value="Control+Shift+A"></x-shortcut>

where the value can consist from any key names defined in https://www.w3.org/TR/uievents-key/, separated by "+" sign. I will fix it later this week as I have quite a lot of code relying on the current API.

BTW, is there a list of other attributes that have special meaning in React?

[rockiger]

Cool, thanks.

BTW, is there a list of other attributes that have special meaning in React?

Not that I am aware of. Some work differently, but this shouldn't be a problem: https://facebook.github.io/react/docs/dom-elements.html.

With the key attribute the problem is, that react omits it

[jarek-foksa]

I have changed the API to <x-shortcut value="Control+Shift+A"> syntax in Xel version 0.0.44.

[rockiger]

Something doesn't seem to work on non apple machines: the modifiers are not shown. The first image is from Linux (same thing for Windows 10) and the second is from a Mac.

[jarek-foksa]

@rockiger This should be now fixed in version 0.0.48.

[rockiger]

Works like a charm now!

Thanks a lot!

[a-y-u-s-h]

How do you use it in React? What do I need to import from xel to make it work?

[jarek-foksa]

@a-y-u-s-h Please check the instructions on https://xel-toolkit.org/setup