Handling an error with onClick event in React

This week I had an issue with a react component that took a little time to debug. There did not seem to be any good explanations as to what was happening, so I thought I’d write it up in case someone is googling to find a solution.

Component and desired behavior: 

The component was created to provide custom controls on a video using the <video> element provided by html5. Within the react application there is a reference created to the video element which is passed in via a context provider.

The desired behavior is to have both mouse click actions, including: play, pause, forward, rewind. It was also desired to have keyboard commands, include allowing the space bar to play/pause and forward/back arrows to forward/rewind.

The observed bug:

  • If you pressed the space bar to play / pause, everything worked.
  • If you clicked on the play / pause icons, everything worked.
  • If you pressed the space bar to play, then clicked the pause button, everything worked.
  • If you clicked the play button, then pressed the space bar, it did not work.

Essentially anytime you tried to go from the click event to the keyup event, the behavior did not work as expected.

The solution: 

After some reading up on the react docs: React Synthetic Events and gaining some insight on how the events were bubbling up within the application , I placed some console.log statements to get an understanding what was occurring.

What I noticed was that when you pressed the space bar then clicked the play or pause icon, I’d see:  “playing via spacebar” followed immediately by “pausing via mouse click”.

What now seems fairly clear, here is what happened:

  • clicking the icon moved the focus to that element
  • pressing the spacebar triggered the appropriate play/pause command
  • However, because the focus was still on the icon the spacebar was also triggering the onClick event.

Prior to figuring this out, I had tried several attempts at using stopPropogation() or stopImmediatePropogation(), although after seeing the results of the console logging, I realized I just needed to stop behavior of the spacebar causing the onClick to fire.

A couple preventDefault() statements and everything is now working as intended.

Here is the working solution:

WorkingSolution

Advertisements

My reverse fundraising campaign for the Boston Marathon.

Over 10 years ago I spent a season as the running coaching for a Team in Training team. It was a great experience. I met a bunch of great individuals, many of those people accomplished their goal of running a 1/2 or full marathon and they raised money for the Leukemia & Lymphoma Society. Team in Training was the first highly scaled and successful fundraising program, which used endurance events as their tool.

Today, I’m excited to see the progress that the team at Moolathon is doing in that space.

When I decided to run the Boston Marathon in 2020, I knew I wanted to use it for something personally rewarding beyond my own running goals.

However I have a personal appreciation to start a fundraising campaign as social media is overwhelmed with different ways individuals are trying to raise money. Facebook has made every birthday a fundraising event.

This is when I decided do a reverse fundraising campaign.

What is a reverse fundraising campaign?

  • It is something I think I just made up?
  • Instead of soliciting donations, I am going ask for suggestions on who I should donate to.
  • Who will I give my money to?
    • I do not have any limitations right now. I will give to an organization that you suggest. I will give it directly to someone that has a need and could use the money. I will give it to you, if it makes sense.
  • What are the requirements?
    • We will need to be connected via a social media platform so we can communicate privately: Instagram, Facebook, Twitter
    • You will need to share a campaign link so I can make a donation  or you will need to have a cashapp account so I can send the funds directly.

What am I giving away?

  • Every Friday between now and the marathon (4/20/20), I will give $26.20

Why?

  • As noted, I wanted the Boston Marathon to be more than about my personal running goals.
  • I have been inspired by watching Bill Pulte use twitter to spread love and money.
  • Money is one of those things I have associated a scarcity mentality to. At times, I do ok, other times it becomes a major barrier for me. In 2019, I had a goal to monthly give money to two organizations, I did occasionally but not consistently. The growing desire to hoard and take is a current problem. As a small business entrepreneur, I’m often waiting for the next phase of stagnant growth or no revenue (or worse). It’s just how I am hard wired. Doing this is one way to change my own mindset and behavior. I realize that $26.20 is not going to change things, but hopefully it helps someone with their campaign, goes toward a pair of shoes for someone to exercise in, a healthy bag of fruit from the grocery or even a race entry for a local 5k? I will paraphrase Bill Pulte from his twitter account, I am simply one person, but together we can change everything.