JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.44k stars 4.1k forks source link

After upgrading to Capybara from 2.18 to 3.30 I get the following error #5840

Closed dpalmerlumint closed 6 months ago

dpalmerlumint commented 6 months ago

Hey so I have scoured the internet for a solution for this but I am not finding it. I'm getting this exact issue.

Capybara v3.36

          After upgrading to Capybara from 2.18 to 3.30 I get the following error:
Selenium::WebDriver::Error::ElementClickInterceptedError: element click intercepted: Element <div class="react-select__input" style="display: inline-block;">...</div> is not clickable at point (108, 298). Other element would receive the click: <div class="css-dvua67-singleValue react-select__single-value">...</div>
  (Session info: headless chrome=76.0.3809.100)
  (Driver info: chromedriver=76.0.3809.126 (d80a294506b4c9d18015e755cee48f953ddc3f2f-refs/branch-heads/3809@{#1024}),platform=Linux 5.0.0-37-generic x86_64)

  0) Currency Balance Sheets Listing filtering allows to filter by client
     Failure/Error: find('.react-select__input', match: :first).set label # set the value

     Selenium::WebDriver::Error::ElementClickInterceptedError:
       element click intercepted: Element <div class="react-select__input" style="display: inline-block;">...</div> is not clickable at point (108, 298). Other element would receive the click: <div class="css-dvua67-singleValue react-select__single-value">...</div>
         (Session info: headless chrome=76.0.3809.100)
         (Driver info: chromedriver=76.0.3809.126 (d80a294506b4c9d18015e755cee48f953ddc3f2f-refs/branch-heads/3809@{#1024}),platform=Linux 5.0.0-37-generic x86_64)

# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/selenium/nodes/chrome_node.rb:46:in `rescue in click'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/selenium/nodes/chrome_node.rb:39:in `click'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/selenium/node.rb:337:in `set_content_editable'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/selenium/node.rb:87:in `set'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/node/element.rb:121:in `block in set'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/node/base.rb:83:in `synchronize'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/node/element.rb:121:in `set'
# ./spec/pages/react_select.rb:16:in `block in react_select'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/session.rb:345:in `within'
# /home/matias/.rvm/gems/ruby-2.5.7@foo/gems/capybara-3.30.0/lib/capybara/dsl.rb:51:in `block (2 levels) in <module:DSL>'
# ./spec/pages/react_select.rb:12:in `react_select'

Has anyone run into this yet? I am using the following code:

# frozen_string_literal: true

# Extracted from https://github.com/JedWatson/react-select/issues/832#issuecomment-276441836
module ReactSelect
  REACT_SELECT_CONTROL_CLASS = '.react-select__control'
  REACT_SELECT_MENU_CLASS = '.react-select__menu'
  REACT_SELECT_OPTION_CLASS = '.react-select__option'
  REACT_SELECT_SELECTED_VALUE_CLASS = '.react-select__single-value'

  def react_select(selector, label)
    within selector do
      find(REACT_SELECT_CONTROL_CLASS).click
      return unless has_selector?(REACT_SELECT_MENU_CLASS) # menu should be open now

      find('.react-select__input').set label # set the value
      # This is a little funky because when the entered text forces the select to
      # wrap, it causes React to re-render.  We need to get it to re-render
      # (if needed) by hovering.
      return unless has_selector?(REACT_SELECT_OPTION_CLASS, text: label)

      find(REACT_SELECT_OPTION_CLASS, text: label).hover
      return unless has_selector?(REACT_SELECT_OPTION_CLASS, text: label)

      find(REACT_SELECT_OPTION_CLASS, text: label).click
      return unless has_selector?(REACT_SELECT_SELECTED_VALUE_CLASS, text: label)
    end
  end
end

Captura de pantalla de 2020-01-20 12-08-44 Captura de pantalla de 2020-01-20 12-08-27

React-Select version: 2.4.4

Originally posted by @matiasgarcia in https://github.com/JedWatson/react-select/issues/832#issuecomment-576315591

dpalmerlumint commented 6 months ago

Figured out that the new version of react-select removes the div with class "input" and adds the "input" class to the actual input. So referencing "input input" needs to be changed to referencing "input".