Must click into canvas preview pane before key events are recognized

[bmoren]

Nature of issue?

• Found a bug
  This is maybe not really a bug, but more of an thing I noticed that might trip up beginners

Details about the bug:

You have to click into the canvas pane in order to make key events recognized.
take the following:

let x = 0

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  //65 is the A  key
  if(keyIsDown(65)){
    x += 1
  }
  
  ellipse(x,height/2,100,100)
}

If you run this code with the play button – after you press it, you first have to click in the preview window before the 'A' key is recognized and the ellipse begins to move.

Perhaps when pressing the Play button, the preview pane should become active/focused?

• Web browser and version: FF 65.0.1 (64-bit)
• Operating System: MACOS 10.13.4

[catarak]

thanks for reporting! this has come up before (see #654), and had decided to leave it as it is, for now. my instinct is that it is more harm then helpful: for times when a user is writing code and refreshing the sketch using auto-refresh or the keyboard shortcuts, it would be really annoying for the code editor to lose focus. you can explicitly tell the canvas to focus on play, as I spelled out in a comment.

[bmoren]

both the issue and the comment make sense to me. I was hesitant to make this a 'bug'. It's the behavior I'd expect, but perhaps there is a way to clear this up with a UI element for the users. I wonder if there is a way to make the active pane more noticeable or explicitly called out?

no commitments here (I'm really not sure about all of this .... can you tell!), but perhaps something like a border around the active pane to indicate where focus is?

[bmoren]

I'll also report that I'm not getting the expected behavior with the
this.focus() outside the p5 functions to focus the preview window

[catarak]

I'll also report that I'm not getting the expected behavior with the
this.focus() outside the p5 functions to focus the preview window

hmmm! i just tried it, and for me, this stripped down sketch works, whether this.focus() is in setup() or outside of it.

[bmoren]

Looks like it's a FF vs Chrome issue

FF 65.0.1 this.focus() 👎
Chrome 72.0.3626.121 this.focus() 👍

[catarak]

ahhh, good to know! i updated that comment accordingly 😸

[catarak]

The cross-browser way to do this is to add the following code:

window.onload = function() {
  this.focus();
}