I cannot interact with the input element to select the first radio button.
Below is what I've tried by far;
export function clickOnMediaAutoLevel(level) {
// button is not clickable without force: true, it is set to hidden in the CSS
cy.get(locators.screen)
.within(($screen) => {
cy.get('div.radio-buttons')
.contains('Media Audio Level')
.find('input')
.click( { force: true } )
})
cy.pause()
}
What am I doing wrong?
Your input has a prop "hidden" and it is possible that it prevents firing of that event (like a prop "disabled" would do).
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.
The hidden attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit. Elements and scripts may, however, refer to elements that are hidden in other contexts.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
Try to mimic clicking on the label, because right now you don't click input itself in an application. You should consider removing a "hidden" prop completely in that context.
Try to use .check() no .click(). Source - https://docs.cypress.io/api/commands/check.html#Syntax
Related
I have this input that when focused opens up a select.
The behavior I want could be achieved with a simple select but I wish to further add functionalities that a simple select does not allow. Simply put when you have the 'box' focused, you can view the options, when you don't you cannot.
I tried to implement this logic using a state that checks if the parent div where the select and the input is focused.
Clicking the input displays the options as expected, however when I try to select an option from the list, before I can select it, the select gets hidden and I can't choose anything.
Demo
Is there another approach for this?
The trouble is that another focusable element (the select) receives focus. You can't avoid that, but you can change how you react to that: you need to check whether the element causing the blur is a descendant of your div. If it is, you don't need to close your select box.
Change your onBlur handler to this:
const onBlur = ({ currentTarget, relatedTarget }) => {
if (!currentTarget.contains(relatedTarget)) {
setMenuActive(false);
}
};
Forked demo. Note that I also changed your state to a simple boolean instead of an object.
just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again
I have a javascript function Display(args...) that modifies the content of a modal window depending on which button is pressed. The function contains other attributes that are hidden or displayed (depending on the arguments that are being passed). Where I am going crazy is that a particular div section refuses to hide/display. Let's say that initially I set it up to be hidden/display:none, then onClick is suppose to be display it; even if I invert the initial state the expected behavior does not occur. I set up the debugger and I see that is trying:
if ($('#SectionRefusingToShow').is(":visible") == false) {
$('#SectionRefusingToShow').show();
}
I see it enters the if statement but still not shown. Inspecting the DOM, its element attribute display:none was not removed. For other classes and ids the hidden are properly removed/added. I am using .show for this one given that hidden state for it did not work either!
I have had a similar problem before, and it turned out that I had multiple elements with the same ID value. Have you checked for that? jQuery can get a little fussy when you select elements by ID, and the ID is not unique (which is technically invalid, so it get's fussy for a good reason).
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?
I am working on a plugin for jQuery that will essentially style certain elements. Like jqTransform I could just replace the element but I chose to position the real element off screen and make a new element thats styled. This allows triggering the actual events of the real element. Also, if an onclick handler or onchange handler for a textbox is there, jqTransform will not include that whereas this way, it will include it.
Here is my problem. Say a user has a button. Later on in the app the user decides to change the value of the button. It will change the original button's value but not the styled button. Is there any way I can connect the elements so that if the original button's value is changed the styled button's value is changed as well?
you can catch any property change on object using onpropertychanged event.
$("#buttonid").bind('propertychange', function(e) {
if (e.originalEvent.propertyName == "value") {
// value is changed, handle it here
}
});