Programmatically focus select component
See original GitHub issueI’m looking to write an integration test for a form that uses a react-select component. This is the Ruby code that I have for it now:
find(".Select").click
find(".Select .Select-input input").native.send_key("Text goes here")
find(".Select-option", text: option_value.presentation).click
I would believe this would:
- Open the input field
- Send the phrase “text goes here” into the field.
- Find the option that matches that text, and then click it.
However, I’m getting this error in my tests:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [356.5, 384] failed. Poltergeist detected another element with CSS selector 'html.js.touch body#en-AU-be.loggedin div.wrapper div.main div div.form--flat div.AdvertForm div.DisplayPanel div div.row div#option_type_wrapper_1.span6.error span.select div.Select.is-focused.is-open.is-searchable div.Select-control div.Select-placeholder' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').
I would consider documentation for how to integration test a react-select (even if it is with some jQuery functions) would be something that this library should provide. I am considering this a “bug” with the documentation for this component, which is why I’m filing this issue.
Please add some examples of programatically triggering / filling in this element with jQuery.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:13
- Comments:28 (1 by maintainers)
Top Results From Across the Web
Programmatically focus a Select · Issue #9599 · mui/material-ui
I want to focus on a select field when a user clicks on a button. My code: ... you need to use the...
Read more >Focus Select element - reactjs - Stack Overflow
I need to be able to programmatically focus the select. Autofocus works for me on the initial render, but not subsequently, specifically I...
Read more >HTMLElement.focus() - Web APIs | MDN
The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused element is the element that will ...
Read more >.focus() | jQuery API Documentation
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements,...
Read more >Set focus on mdb-select programmatically
Hello, I am using Angular and I'm having a problem to set focus on mdb-select. Can i set it programmatically ? I am...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It seems to changes in library itself, so we need to trigger event
touchend
on svg icon or its wrapper to open options list to be able to select one.This link may be helpful to testing in chrome (presumably puppeteer for integration tests): https://stackoverflow.com/a/42447620
Tried all the options above, nothing worked in plain js for me. But after a while I figured out, this works:
Where
selectContainer
is just some higher level DOM element wrapping the specific select you are interested in. In my case I simply wrapped it with a new div, but you can of course you can querySelect an existing Select container