Unable to select item (Text) from a specific drop down menu?

Question

Currently I'm attempting to interact with a dropdown menu which only shows specific text once clicked.

Take a look at the following example image:

<div class="" style="display: inline-block;">
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 4px; 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: 12px; font-family: sans-serif; font-weight: 300; font-style: normal; letter-spacing: normal; text-transform: none;">
</div>
</div>

As you can see from the above image upon clicking on the element the text is visible however when I inspect the element, I'm unable to see any of the dropdown text items?

I have tried the following:

• Clicking on the element > then using link text
• Looping through the element using a List
• Clicking on the element and then trying to send keys
• Also I'm unable to use select as you can see from the html code its constructed differently.

Any ideas?

Answer 1

One option would be:

yourOption = element(by.id('react-select-2-input')).
yourOption.Click();
yourOption.sendKeys(Keys.DOWN);
yourOption.sendKeys(Keys.RETURN);

There must be a List somewhere in the HTML too that will have the options in it to be able to select from. It may not be a direct parent or child of the input.