Missing mouseReleased event with createSelect DOM object in Safari

[goldwasser]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [x] DOM
• [x] 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.