title: webdriver.io async issues - clicking on an element and then entering text
body: <p>I am trying to account for "chosen selects" in my automated testing script. I am using webdriver.io and referring to the follow API info: 
  <a href="http://webdriver.io/api.html" rel="nofollow">http://webdriver.io/api.html</a></p>
  
  <p>I need to click on 'a.chosen-single' which in the "chosen" world is equal to a user clicking into the select. This focuses the user on a text input (which allows the user to filter through the select options, thus why chosen is cool) and I need to then simulate the user entering the text. </p>
  
  <p>The problem is that the script I wrote results in all chosen-selects being clicked and THEN the keys get entered. This means that they text is only getting entered into the final chosen-select input. </p>
  
  <p>I've inserted a pause() after the element is clicked into. I would expect the pause to happen after each click, but instead the pause only happens at the end when the last element is clicked and the keys for all elements are all typed together at the end so that the last element has a value of 'FIL12'</p>
  
  <pre><code>this.click(container + ' a.chosen-single').then(function(){
                  console.log('clicked');
                  console.log('value', fields[selectName]);
                  this.pause(1000)
                  this.keys(fields[selectName])
                  //press enter to finalize selection
                  //.keys('\uE007')
  
                  console.log('keys pressed');
                });
  </code></pre>
  
  <p>Here is the read-out I get in the terminal: </p>
  
  <pre><code>clicked
  value F
  keys pressed
  clicked
  value IL
  keys pressed
  clicked
  value 1
  keys pressed
  clicked
  value 2
  keys pressed
  </code></pre>
  
  <p>I can't figure out how to assure that the next task does not get queued until the keystrokes have been entered. Please help.</p>