Capybara fill_in not working in Bootstrap modal

Modal inputs are sometimes not populated.

In the steps, the inputs have to be filled in and submitted to submit, but sometimes one of the inputs (sometimes the code, sometimes the name) is not filled in and execution continues with the click_button and empty inputs.

I tried using find () with set () but the result is the same. I also tried without inside () and didn't work, gave the same non-deterministic result.

When I write twice, fill_in () works, for example:

fill_in 'foo_code', :with => code
fill_in 'foo_code', :with => code

      

        
        
        
      

    

Does anyone know a better solution than calling fill_in () twice?

Step:

fill_form_modal(foo[:code], foo[:name])
click_button 'Save'

# features/step_definitions/steps.rb
def fill_form_modal(code, name)
   within "#createModal" do
      expect(page).to have_selector('#foo_code', visible: true)
      fill_in 'foo_code', :with => code
      expect(page).to have_selector('#foo_name', visible: true)
      fill_in 'name_code', :with => name
   end
end

      

        
        
        
      

    

Modal:

<div class="modal fade modal-vcenter pcp in" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_createModal" aria-hidden="false" style="display: block;">
   <div class="modal-dialog  modal-dialog-form-xs" role="document">
      <div class="modal-content" z-depth="4" style="margin-top: 270px;">
         <div class="modal-body ">
            <form class="form" action="/workmanships" method="post" id="formId_080499881900748081447698693108">
               <input name="utf8" type="hidden" value="✓">
               <input type="hidden" name="authenticity_token" value="IRouh/Trz">
               <div class="col-sm-12 col-md-12 col-lg-12">
                  <div class="form-group">
                     <input class=" form-control required" type="text" name="workmanship[code]" id="workmanship_code">
                     <label>* Code </label>
                  </div>
               </div>
               <div class="col-sm-12 col-md-12 col-lg-12">
                  <div class="form-group">
                     <input class=" form-control required" type="text" name="workmanship[name]" id="workmanship_name">
                     <label>* Name </label>
                  </div>
               </div>
               <input type="hidden" name="guide" id="guide">
               <div class="modal-actions">
                  <button type="button" formnovalidate="" class="btn ink-reaction btn-default-bright" data-dismiss="modal">Cancel</button>          
                  <button type="submit" formnovalidate="" class="btn ink-reaction btn-success" name="commit"> Save</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

      

        
        
        
      

    

I am using selenium webdriver.