Missing mouseReleased event with createSelect DOM object in Safari

[goldwasser]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

1.11.11

Web browser and version

Safari Version 26.0.1 (20622.1.22.118.4).

Operating system

MacOSX

Steps to reproduce this

Likely a bug with Safari/DOM, but worth seeing if something could be resolved from within p5js code. When creating a dropdown DOM with createSelect() function in p5js, it seems that on Safari, interactions with that dropdown are triggering a p5js mousePressed event but not a corresponding p5js mouseReleased event. This leaves internal variable mouseIsPressed set to true, and subsequent mouse move events are being categorized as mouse draw events from within src/events/mouse.js as a result. Problem was reproduced on two machines using MacOSX + Safari, but the problem does not occur when using Chrome or Firefox on those same machines, nor when using Safari on an iPad.

Steps:

1. Click on the dropdown widget to make selection
2. Release mouse after making selection
3. Mouse over the p5js Canvas.

Snippet:

// Demo at https://editor.p5js.org/michaelgoldwasser/sketches/Dbdib65Qp
function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();
  selector = createSelect();
  selector.option("red", color(255, 0, 0));
  selector.option("blue", color(0, 0, 255));
}

function mousePressed() {
  console.log("mousePressed fired");
}

function mouseReleased() {
  console.log("mouseReleased fired");
}

function mouseDragged() {
  fill(selector.value());
  circle(mouseX, mouseY, 5);
}

[ksen0]

Confirming that I can reproduce this on Safari on MacOSX, and also with p5.js 2.1.1 (and 1.0.0).

Before any fix, it would be great if someone first checked if there's a Safari DOM bug. If it's not a Safari bug, then it might make sense to investigate a patch on p5 dom; and whether other dom elements are affected by this behavior. Generally, in the current state of p5.js, only regression bugfixes could be added to 1.x, so I would suggest the fix here should focus on the dev-2.0 branch, and potentially be cherry-picked to main if it is considered necessary.

@goldwasser thanks for the detailed report! Do you also want to further investigate/fix this?

[LuciferVid]

@goldwasser i would like to work on this issue

[goldwasser]

@ksen0 Thanks for the confirmation
@LuciferVid Happy to have you work on the issue (as I won't have time for now)

[LuciferVid]

@goldwasser for sure...can you assign it to me then?

[LuciferVid]

@goldwasser @ksen0 Thanks for confirming! I’d be happy to help investigate and propose a fix.
Here’s what I suggest as next steps:
Verify Safari behavior: Test createSelect and other p5 DOM elements (createInput, createButton, etc.) to confirm whether the missing mouseReleased is consistent and Safari-specific.
Prepare a minimal patch: If confirmed, attach a mouseup listener to the underlying DOM elements that:
Calls mouseReleased()
Resets mouseIsPressed to false
Target dev-2.0: Implement the patch on the dev-2.0 branch, so it can be reviewed and potentially cherry-picked to main if necessary.
I can do the above and prepare a PR once we confirm that this is a Safari-specific issue. This approach keeps it safe for other browsers and other DOM elements.