How to enter text into a react-selectize-control using Watir

Question

I have the following code on the page:

 <div class="col-md-5 col-lg-3">
  <div class="react-selectize bootstrap3 root-node simple-select open">
   <div class="react-selectize-control">
    <div class="react-selectize-placeholder">testing!</div>
     <div class="react-selectize-search-field-and-selected-values">
      <input class="resizable-input" style="width: 4px;" type="input">

If I physically select the input field and then run the following using watir-classic:

BROWSER.div(:class => 'col-md-5 col-lg-3')
       .div(:class => 'react-selectize-search-field-and-selected-values')
       .text_field(:class => 'resizable-input')
       .send_keys('Magg')

it will enter Magg into the field, but if I don't manually select the field I can't seem to get watir to enter the text.

I've tried the following:

BROWSER.div(:class => 'col-md-5 col-lg-3')
       .div(:class => 'react-selectize-search-field-and-selected-values')
       .text_field(:class => 'resizable-input')

with

.set('Magg')
.fire_event('onfocus')
.fire_event('mousedown')
.fire_event('mouseup')

using

.parent.text_field(:class => 'resizable-input')
.parent.input(:class => 'resizable-input').set('Magg')
.input(:class => 'resizable-input').set('Magg')
.input(:class => 'resizable-input').send_keys('Magg')

I've been working with the developer using the control and neither of us can figure out how to give the control focus so that the send_keys works without manually selecting the control. Any guidance would be greatly appreciated.

Answer 1

First - obligatory warning that Watir Classic is deprecated and you should be using Watir WebDriver. (which may fix this issue)

Second - technically: div(:class => 'col-md-5 col-lg-3') should be div(:css => '.col-md-5.col-lg-3') since class should be singular.

Have you tried just doing element.fire_event(:click) before element.set?

Answer 2

Be aware that your HTML has an invalid 'type' value for the input tag. Per W3.org the type of 'input' is not a valid type choice for an input tag.

That is likely what is causing the method you expect to work (such as .set) to fail. It also means that all the watir methods to return the more specific sub-types of input (e.g. .text_field) will not work to select that tag.

Watir defines the specific input related methods (such as .set, .unset) according to the specific sub-type of input tag, and has methods to select those specific input types (such as .button). Normally you'd select an input tag using the method for it's sub-type, but because that value is not valid, that is not an option in this case, and you are forced to use .input. But as we just discussed, the input object in watir does not have methods like .set defined. So your only fallback is to use .sendkeys to send keystrokes to the element.

If it was me I'd write up a bug on that HTML, that it is not using a proper value for 'type' per the W3 spec.

Fixing the HTML to be valid will likely cause it to work far better with Watir or any other automation tool, especially those based on webdriver.