I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting
<div class="v-input--selection-controls__ripple primary--text"></div>
as the result but every now and then I get
<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">
Am I missing something in this or is this unexpected behavior?
Codepen Example
What is happening is that you're clicking on two different elements.
When you click on the ball or around it in the grey area you click on this element:
But when you click outside it but still inside the input you click on this other element:
However, both of then capture you click.
You could change your implementation to capture the change event:
<template v-slot:item.ia="{ item }">
<v-switch
v-model="ia_array"
:key="item.id"
:label="item.state"
:value="item.state"
#change="onChange"
></v-switch>
</template>
Related
While selecting radio button inside laravel Dusk i am getting
Facebook\WebDriver\Exception\ElementNotInteractableException: element
not interactable
Here is my code
$browser->visit('/test')
->radio('question_outer_3', '29')
->assertTitleContains('Test');
This is my templete
<input type="radio" class="radio user_questions " name="question_outer_3" id="option29" value="29" data-question="11" data-option="29" data-scroll-to=" #question_outer_4 ">
Often elements are "not interactable" when are not in the viewport (e.g. you have to scroll to reach them, or are still to be appended in the DOM after a Javascript call).
Scrolling and waiting for text may help.
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
React-A11y yells at my Modal for 'tabIndex' and 'role'. My Modal looks like this:
<Modal
aria-label="..."
tabIndex={-1}
role="Dialog"
show={this.state.showInfo}
onHide={this.closeInfo.bind(this)} >
<Modal.Header tabIndex={9} role="Dialog" closeButton>
<Modal.Title tabIndex={-1} role="Dialog">...</Modal.Title>
</Modal.Header>
<Modal.Body tabIndex={-1} role="Dialog">
...
</Modal.Body>
</Modal>
As you can see from above, I do have tabIndex and role in every Element, but when I checkout React plugin I found out that A11y is yelling at the child of Modal that I can't access:
I am not allowed to use other modified Modals like React-Accessible-Modal. So is there any ways for me to go around to get rid of this warning? Thanks
Top element is correct. Immediate child div should have role="document" and NO tabIndex. In fact only your root element (the dialog box) should have tabIndex="-1". All other roles should be removed.
Tabindex affects tabbing order. If you set it 0, then that element will be able to receive focus via tabbing. I would avoid this if possible. Browsers allow focus on interactive elements. Consider wrapping elements you want to receive focus in an anchor or the like.
Tabindex as a positive is a no no. Totally messes up tabbing order.
Tabindex -1 is actually fine, but ONLY if that element is to receive focus programmatically via js
[Element].focus();
So your dialog should programmatically receive focus and just allow a natural tabbing order for the rest.
Note: trap focus in the modal until the user closes the modal. Then return focus to the modal trigger(anchor or button, I prefer anchor)
I want to trigger an event when an element is removed from the DOM.
In one of my templates I show a checkbox only when a condition is met:
{{#if some.thing}}
<input type="checkbox" class="checkbox">
{{/if}}
This checkbox later then is converted to a Bootstrap Toggle component.
What it does is, it hides the original checkbox and adds some markup to the document. All OK with that.
Now, if my collection changes and the condition, which previously was met, now evaluates to false, the checkbox is removed from the DOM. The node created from Bootstrap Toggle though stays present. So I want to remove the nde when the checkbox is removed.
I thought I could to this with the DOMNodeRemoved event but have some issues there:
Template.myTemplate.events({
"DOMNodeRemoved input.checkbox": function(el) {
$(el.currentTarget).bootstrapToggle('destroy');
}
});
The event fires, but somehow it ends in a cascade when I call bootstrapToggle('destroy') and the browser freezes. Also the event fires multiple times before and it makes me think this is not the correct way to watch for removed nodes in the first place.
Is there any better way to watch for removed elements and fire an event before they are deleted?
I know I could simply call a helper from my template, manually check if the node exists and delete the node with jQuery. But I'd like to see if this is possible with Meteor.events instead.
If you place the input (and the new bootstrap node/s) inside a child template, this should "just work" out of the box.
<template name="parent">
{{#if some.thing}}
{{> child}}
{{/if}}
</template>
<template name="child">
<input type="checkbox">
<!-- additional bootstrap nodes get instantiated in child -->
</template>
In the above, if some.thing === false the input and the new node/s will be removed from the DOM by Meteor automatically.
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".