1

I need to open dropdown menu of select box without clicking on it, for example — with key pressed. For some reason click() works fine with other elements like file input, but cannot open dropdown list. Here is example:

https://openprocessing.org/sketch/1587950

function setup() {
  createCanvas(600, 250);       background(200);                                 // create canvas
  sel = createSelect();         sel.position(100,100);     sel.id('mySel');      // create select box
  inp = createFileInput(open);  inp.position(300,100);     inp.id('myInput');    // create file input
  for(let i=0; i<5; i++)      { sel.option(random()); }                          // create select box options
}

function keyPressed() {
  // open dropdown with left key - doesn't work
  if      (keyCode === LEFT_ARROW)  {    document.getElementById('mySel').click();    }  
  // open file dialog with right key - works fine
  else if (keyCode === RIGHT_ARROW) {    document.getElementById('myInput').click();  } 
}

function draw() {}          // empty
function open(file) {}      // empty

Is there a way to open this dropdown, maybe without click()?

ggorlen
  • 44,755
  • 7
  • 76
  • 106
hayabuzo
  • 98
  • 7
  • 1
    Does this answer your question? [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due). See also [Is it possible to use JS to open an HTML select to show its option list?](https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list). I don't think p5.js is truly relevant here--all of the triggering logic is pure vanilla JS. – ggorlen May 30 '22 at 16:40
  • 1
    @ggorlen thank you, seems like there are no simple solution. – hayabuzo May 31 '22 at 05:25

0 Answers0