I am trying to write an automation script with protractor that will select an element from a react-select dropdown menu. However, when I select the dropdown menu element and use .click(), the menu doesn't open. It seems that the react-select dropdown isn't responding to the .click() call. Is there another method to call on the react-select dropdown that will click the menu and open it?
Code for the dropdown menu.
<div className={ cx('select-container')} data-mr-ass='grey-info'>
<Select
classNamePrefix='info'
components={{
DropdownIndicator: () => <Icon className={ cx('icon-wrap') } iconName={iconNames.downArrow} />,
Option: (props) => <div data-mr-ass='grey-info-options'> <components.Option {...props}/></div> }}
isSearchable={false}
onChange={selectGrayPercent}
options={grayOptions}
placeholder='Select'
value={grayValue}
openMenuOnClick={true}
/>
</div>
</div>
I tried doing $(attr('grey-info')).click(); but the menu doesn't open so I am unable to select any of the options in the menu. data-mr is my div class name to select elements using Protractor.
you can now use protractor-react-selector to identify web elements by react's component, props, and state.
You can identify your target element by:
const myElement = element(
by.react('Select', { someBooleanProp: true }, { someBooleanState: true })
);
Let me know if this helps!
Related
I want to build a really basic search bar with a search icon (similar to the one on Material-UI ) & invoke a function with the current value of the search field whenever the user hits enter or click on the search enter. I am new to Material-UI & I'm struggling to find my way through the different text fields elements.
I currently have this code
import Input from '#material-ui/core/Input';
class ...somecode
...somecode
constructor(props) {
super(props);
this.state = {
resources: [],
value: '',
};
}
handleChange(event) {
console.log(event.target.value);
this.setState({ value: event.target.value });
}
search(/* access value upons enter/ search icon click */) { <--------------------------
}
...some code
return (
<form id="search">
<Input type="text" value={value} onChange={(event) => { this.handleChange(event); }} placeholder="Search..." autoFocus fullWidth />
</form>
);
p.s: I had a really hard time fiddling around with all the APIs and options available in the input suite (I highly suggest an explanation of how they are related in the docs)
Once i select a dropdown value from a dropdown field i want a section in another div to be loaded
ngif would help me do this, but how could i add this as a condition for the display of that section
Any dropdown selected should open that section
Later would customise it to different other sections in a div to load based on selection of the different dropdowns values accordingly
This can be solve by using selectionchange event emmiter function, whenever you select a value from the dropdown you can call an eventemmiter function. See the code below:
Html Code:
<div>
<mat-select placeholder="Options"
(selectionChange)="onSelecetionChange($event.value)">
<mat-option value="individual ">Individual </mat-option>
<mat-option value="business">Business</mat-option>
</mat-select>
</div>
<div *ngIf="individual">
Individual Div
</div>
<div *ngIf="business">
Business Div
</div>
My ts code:
individual: boolean;
business: boolean;
onSelecetionChange( value: string ) {
if( value === 'individual') {
// You can add some service call or customize your data from here
this.individual = true;
}
if( value === 'business') {
// You can add some service call or customize your data from here
this.business = true;
}
}
I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)
Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.
It is opened as the following:
datatable as react components
opens bootsrap modal as react component
initializes tinymce on textareas inside of the modal
loads the code plugin (which itself then is not accepting any kind of input anymore)
My initilization of the editor looks like this:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.
Does anybody has an idea, what is causing this or how to simply debug it further?
Thx a lot!
if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
What does your html/jsx look like in your component?
My guess is that react might be treating your input as a Controlled Component
If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.
Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.
Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.
The final code looks like this, in case it becomes handy at some point:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
Best wishes
Andreas
Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}
value passing on Winjs listview button click
Hi i am working on a winJS application.i have a winjs list and a button inside the listview.I need to pass a value on button click.
suggest use 'iteminvoked' event on the listview.
test.html:
<div class="listview-host">
<div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', tapBehavior: 'invokeOnly', swipeBehavior: 'none' }"></div>
</div>
test.js:
WinJS.UI.Pages.define('/pages/test/test.html',
{
ready: function onready(element, options)
{
...
listView.addEventListener('iteminvoked', this._oniteminvoked.bind(this));
},
_oniteminvoked: function oniteminvoked(event)
{
}
}
I don't know if it is an easy question but i couldn't find the solution. I want to create 10 buttons in dojo like the button below.
<div style="right: 1px">
<button data-dojo-type="dijit.form.Button" id="SaveChangesDataGrid1" onclick="SaveChanges()">
Save</button>
</div>
but each button with different ID but the same function onClick. so what i want is when the button is clicked the id of the clicked button will be known in the function.
I am using dojo 1.8 any ideas?.
Change your onclick="SaveChanges()" to onclick="SaveChanges(event)" or get rid of it and use data-dojo-props:
<button
data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:SaveChanges"
id="SaveChangesDataGrid2"
>
SaveChangesDataGrid2
</button>
Start your SaveChanges() this way to get id:
require([
"dijit/registry",
"dijit/form/Button",
], function(
registry
) {
window.SaveChanges = function(event) {
var button = registry.getEnclosingWidget(event.target);
console.log("onclick id:", button.id);
}
});
See it in action at jsFiddle: http://jsfiddle.net/phusick/WfdKF/