Use Selenium to select an option from an Input element with multi-select drop-down

Question

I am getting this error message when trying to select a drop-down value:

    UnexpectedTagNameException with message 'Element should have been "select" but was "input" error'

The Error is descriptive in saying that the element is an "Input" element instead of a "Select" element, but the field is actually a multi select drop-down which the user can typeinto or select.

I am using the following command:

    Select state = new Select(driver.findElement(By.id("stateCode")));
    state.selectByIndex(6);

This is the HTML:

    <div class="react-select__input" style="display: inline-block;">
     <input autocapitalize="none" autocomplete="off" autocorrect="off" id="stateCode" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
      <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: &quot;Open Sans&quot;, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
     </div>
  </div>

Is there another way to select the value from the drop-down?

Answer 1

As per the html code attached you are accessing an <input> tag with type='text' (which means a text box).

We can use Select only on <select> tag like below:

<select id='mySelect'>
 <option value="1">1</option> 
</select>

Select select = new Select(driver.findElement(By.id("mySelect")));

Answer 2

This exception occurs because the drop which you are accessing using select class is wrong. Use element.click();

Then use element sendkeys("your data here");.

Answer 3

You can follow any of the below 2 approaches:

Approach 1: (I believe this will be the best approach to follow)

Click on the Input element which will pop your multi-select dropdown : driver.findElement(By.xpath("//input[@id='stateCode']")).click();

Find the desired value by using desired locator: Ex: driver.findElement(By.xpath(…)),

Approach 2:

Type your desired value in the Input element   :  driver.findElement(By.xpath("//input[@id='stateCode']")).sendKeys("DesiredCheckBoxOption");

Click on the very first occurrence for checkbox by using desired locator (Ex: driver.findElement(By.xpath(…)))

Clear the input box: 

driver.findElement(By.xpath("//input[@id='stateCode']")).clear(); 

Repeat  steps 1,2,3 for multiple selections (you can use a loop)