[BUG] Functional component hook state does not update without refocus

[jordantomax]

Describe the bug
See codesandbox to reproduce: https://codesandbox.io/embed/ecstatic-https-04p9f
Functional component hook state does not update inside of hotKeys bound handler without unfocus and refocus, even when using allowChanges.

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc)
HotKeys

Expected behavior
The value coming from the handler function should always be the latest state value

Platform (please complete the following information):

• Version of react-hotkeys: 2.0.0-pre7
• Browser: chrome
• OS: MacOS

Are you willing and able to create a PR request to fix this issue?
I am. Do you have details about your development workflow? For instance, is there a simple watch script that I can use while developing. most of the instructions I saw were with regards to packaging the production bundle.

APPLICABLE TO v2.0.0-pre1 AND ABOVE: ======================

Include the smallest log that includes your issue:
I think the codesandbox should make the issue pretty clear, but I'm happy to add this if it would help.

What Configuration options are you using?
None

[greena13]

Hi @jordantomax, is this a duplicate of #183 or a slightly different issue?

[jordantomax]

@greena13 I believe it's a different issue. I pulled the latest from master, and I can still reproduce in the same way as with the codesandbox. I was looking into trying to contribute, but having a bit of difficulty with the development workflow 🤔 .

[greena13]

Ok, thanks for confirming and that's great that you're open to contributing.

The development workflow at the moment is to try and reproduce any issues with the example application, which you can get started with using something like:

yarn prepublish && cd examples && yarn start

If that's not necessary or you already have a handle on the root cause of the issue, then I generally add a new test that expresses the expectation and fails, and have the test suite automatically run on each save:

yarn watch-tests

There's currently no way to rebuild the example app with each change, if that's how you prefer to work on finding a fix. But there's no reason why a build script couldn't be added to do so.

[jordantomax]

@greena13 That makes sense, thanks. Once I do write a test and get it passing, simply doing yarn prepublish should package the latest? I wrote a few simple console.log messages to test that prepublishing was correctly updating the package, but after linking my forked copy and using the link inside of my main code repository, I still don't see the logs after running yarn prepublish. Am I doing something wrong?

[greena13]

If I'm understanding you correctly, you're using an existing code base (your application) and you're hoping to modify a local fork of react-hotkeys to confirm the issue has been resolved?

If so, you'll need to do something like the following:

• Assuming you have react-hotkeys and your application (my-app) in the same directory
• You start your application with a cmd like yarn start-my-application

cd react-hotkeys && yarn prepublish && cd ../my-app && yarn remove react-hotkeys && yarn add file:../react-hotkeys && yarn start-my-application

Basically, you need to prepublish the local fork to compile the code that is published to npm:

yarn prepublish

and remove the old version from the node_modules directory of your app:

yarn remove react-hotkeys

before adding it again from your local version:

yarn add file:../react-hotkeys

Any less, and I have had issues with code changes not taking effect.

[greena13]

@jordantomax, I'm afraid I have caused confusion again by not reading your response with sufficient care before responding. I try and walk the line between rapid and meaningful responses to issues filed on this repo, but this means I'm often picking them up between other things and I don't always have as much time as I'd like to formulate a considered response.

The issue I meant to point you to as a possible duplicate was #182 (and not your own previous issue).
I've tried your example app using the latest version of the code (on master, but not yet deployed) and it seems to indeed resolve the issue that you were seeing. I did discover a new issue (#198), which I am fixing this morning before work. If I get enough time, I'll also deploy a new release candidate, containing the fixes to both the issues you're waiting on.

Apologies for wasting your time. 😕

[greena13]

Fix is now available in v2.0.0-pre8.

[jordantomax]

Hi @greena13 apologies for my delayed response, and no worries about the mix up! Just tested with the latest version and everything seems to be working as expected now. Really appreciate your help getting everything fixed 🛠 👍

[greena13]

That's fantastic to hear it solved your problems. 😄

_{^{A small reminder that if react-hotkeys delivers value to you, there are ways of supporting its continued development}}.

[jordantomax]

@greena13 Questions for you. In the sandbox I created (https://codesandbox.io/embed/ecstatic-https-04p9f), when I add some text, then add 2 line breaks and add some more text, the hotkeys no longer work. It seems specific to the line breaks, any idea what's going on there? Happy to open another issue if it's helpful.

[greena13]

@jordantomax Line breaks don't really enter react-hotkeys' domain. It deals with the key presses, no the characters generated.

A few unlikely ideas are that the linebreak somehow momentarily changes focus. Or that some of the attributes on the Enter key event are different, when in an input field, vs outside of it (which perhaps breaks some embedded assumption of react-hotkeys).

A separate issue may indeed be the best place to continue tracking this unusual (but interesting) issue you're seeing. Please include a more detailed description for the hotkeys no longer work.

[jordantomax]

@greena13 Sounds good, I'll create a separate issue with more details. Regarding support, do you have a twitter account I can follow & DM you on?

[greena13]

Thanks, @jordan. Much appreciated.

I have a Twitter account (@aleck_greenham), but don't use the service. I'll be sure to check it over the coming days if you would like to contact me through it, though.

[jordantomax]

@greena13 DM'ed.

[greena13]

Hey @jordantomax, I'm sorry I missed this. I haven't had a response on Twitter.

I've checked the above details are correct and I've logged out and back in again. I'm going through my account settings now, but can't see much of relevance. Does it appear to have sent on your end?

Update: Scratch that, I found a setting related to receiving DMs. Apologies, but would you mind sending it again? I hope it saved in some form on your side. :/

[jordantomax]

@greena13 hmm, can't seem to DM you. I just wanted to ask the best way to contribute, i.e. what's the best platform. I'm happy to do it while we're using the product (though hooks hotness may give you a run for your 💸😛) You can email me at jordan@kobee.io if you want to keep it private.

[greena13]

Ah, apologies. It seems I wasn't clear. I just enabled the setting that's permitted DMs from outside my existing Twitter network - I didn't send you a message. :) (Re-read after some coffee)

No problem, the support section details the available options. PayPal is preferred for one-off contributions and Patreon for reoccurring. If you'd prefer to use something else, let me know and I'll drop you an email to discuss the specifics. Thanks!

[jordantomax]

@greena13 nice! Sent over a small amount. I know it's not a lot, but it's infinitely greater than $0 :) Look forward to the future of the library.

[greena13]

No problem, it's all appreciated. Thanks!