P5.js: <Select> Elements not responsive on mobile device browsers

Created on 3 Apr 2017  路  29Comments  路  Source: processing/p5.js

After some investigation, and @JimishF pointing out that this is unrelated to #1864 and #1868, here's a whole new issue: select elements created using createSelect() are unresponsive on mobile browsers. I've tested this on:

  • PhoneGap/Cordova
  • Chrome on Android
  • Safari on iOS

To replicate this in Chrome or Safari:

  1. Create the sketch below
  2. Run a local server in the sketch directory: $ python -m SimpleHTTPServer works for me on OSX.
  3. Open the page in either browser.
  4. Tap the select element

You should get no response from the select, but you can add elements to it using the button (just proving that it really is unrelated to #1864 and #1868)

The sketch:

var responseDiv, opts, addButton;
function setup() {
  console.log('starting');
  opts = createSelect();
  opts.position(10, 10);
  opts.size(150, 30)
  opts.option('Pick a device', random(34));
  opts.option('fee', random(34));
  opts.option('fie', random(34));
  opts.option('fo', random(34));
  opts.changed(fum);

  responseDiv = createDiv('tap the scan button to begin');
  responseDiv.position(10, 100);
  addButton = createButton('add an option');
  addButton.position(10, 40);
  addButton.touchEnded(addSomething);
}


function fum(event) {
  console.log(event.target);
  responseDiv.html(opts.value());
}

function addSomething() {
  var number = random(34);
  opts.option('another'+ number, number);
}

To test in PhoneGap:

  1. Follow Jiashan's instructions to make a p5 PhoneGap project.
  2. Add p5.dom.js to the list of script includes in the index.html as well.
  3. run the app on your phone. Should see the same results.

To test in Chrome on OSX:

  1. Open page locally
  2. Open JavaScript Console
  3. Click "Toggle Device Toolbar (shift-command-M) in JS console
  4. Pick any of the Android or iOS devices
    You should see the same results.

Strangely, I was able to get