Develop Reference

Cypress is not closing menu when I click on a button from menu

Here I am testing a Vue application using cypress. I have a menu on my app screen. Normally when I click a button on the menu it closes the menu and performs the functionality. But when I do it using cypress, it performs the functionality but it can't close the menu.
Here is my sample code.
it('Open menu, Click on sort button(A -> Z): Check ascending order of data', function () {
cy.server();
cy.route("GET", getTableListAPI).as('getTableList');
cy.route("GET", getFirstPageTableData).as("getTableDetails");
//Asc sort Api
cy.route("GET", ascendingSortApi).as("getAscData");
cy.visit(testTargetURL);
//Wait to load data
cy.wait('#getTableList');
//Select the target tablefrom the left pane
cy.get(selectors.navigationDrawer).find('a').contains(testTableWithData).click();
//Wait to load data
cy.wait('#getTableDetails');
//Open menu
cy.get('th').eq(1).find('button').click();
//Click on first button.
cy.get(selectors.filterMenu).within(($menu) => {
cy.get('.v-item-group').find('button').eq(0).click();
})
//Wait to load data
cy.wait('#getAscData');
//Check visibility
cy.get(selectors.filterMenu).should('not.be.visible');
//Check ascending order data
cy.get('table').within(($table) => {
cy.get('tr').find('td').should('contain','');
cy.get('tr').find('td').should('contain','-9223372036854776000');
})
})
Note: I have also tried
click({ force: true });
cy.wait(500) // Following (https://github.com/cypress-io/cypress/issues/3135#issuecomment-454420548) this issue.
But still, it is not working for me. Please suggest something else for me.
Thanks in advance.

It seems to me the problem is that you are using {force:true} and that doesn`t trigger the function to close the menu. Try selecting some parent element of the button that is native to the menu and click it.

Cannot open second Modal (or only opens modal-backdrop) after closing Modal (Bootstrap Modal with Google map) using Angular, JavaScript and jQuery

UPDATED
I need some fresh eyes on my problem. I have done a lot of research and have tried everything I can think of, but for some reason I simply cannot get my modals to behave in the way I want them to.
My issue:
After opening modal one (which has a Google map and Google auto complete address field), I trigger via a button click the close of modal one, and opening modal two. But modal two does not open, or you only see the modal-backdrop.
My code:
(1) The first modal is opened via this click event:
<a class="shop-btn" id="5G router-32" (click)="startFivegJourney()">buy</a>
(2) The click event fires this method which opens the #five-g-product-modal. The reason for the additional shown.bs.modal code is simply for setting the z-index of the modal, making sure that the Google autocomplete address field does not display behind the opened modal.
startFivegJourney() {
if (this.cartService.simsInCart.length > 0) {
$('#modal-clear-cart').modal('show');
} else {
$('#five-g-product-modal').modal('show');
$('#five-g-product-modal').on('shown.bs.modal', () => {
$('.pac-container').css('z-index', $('#five-g-product-modal').css('z-index'));
});
}
}
(3) A button click event fired from modal one that is now open, triggers the method below, which hides modal one.
checkFiveGCoverage() {
$('#five-g-product-modal').modal('hide');
$('#five-g-product-modal').on('hidden.bs.modal', () => {
$('#five-g-coverage-modal').modal('show');
this.openModal();
});
}
(4) After modal one has completely closed, a simple method is called to open the new modal:
openModal() {
$('#five-g-coverage-modal').modal('show');
}
I have tried various ways of opening the modal (the modal does open on top of the first modal if I do not close the first modal), but it is as if it does not fire, or opens the modal-backdrop only. Thank you in advance!

Close mobile menu by clicking / tapping outside

I want to have the option to close a mobile menu by clicking outside of the menu on this site http://test1.wasodesign.com/
I searched StackOverflow and the web, and found this solution
<script>$(document).click(function(event) {
if(!$(event.target).closest('.collapse.in').length) {
if($('.collapse.in').is(":visible")) {
$('.collapse').hide();
}
}
})
</script>
I applied it, and the issue is that it does close on mobile when clicking outside of the menu but then I cannot reopen the menu afterward.
Is there any reason? How can I resolve this?
Thanks

you could try something like:
$('body').on("click", ".dropdown-menu", function() {
$('.dropdown-menu').hide()
$('.collapse').hide()
});
With this the menu should open when you click on the button.
$('.dropdown-menu').on("click",function() {
$('.collapse').show()
$('.dropdown-menu').show()
});
one of those two should work if not leave a comment.

Prevent closing of a navbar with another element's trigger click

I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.
Here is the twitter scroll code:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.

For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.
Simply add 'data-autohide="false"'to the offcanvas element.
I then added a function to toggle the navbar state on click of a link within the navbar as follows;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.

If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
in your code. that's it.
Note: It's work like charm in single page application.

DOJO dialog not opening second time after clicking close(x) button on the upper right corner

I have a dialog button named EDIT in my page.
First time when you click on EDIT button,the EDIT pop up window appears. When I close the pop up window by clicking on the Close (x) button located on the upper right corner of the pop up window and click EDIT button again the second time, the pop up window is not appearing(opening). But after clicking on the 'CANCEL' and 'APPLY' buttons located below on the same 'EDIT' pop up window and clicking on EDIT for the second time, the pop up window opens. So there is a problem after clicking on the close button which is not allowing me to open the EDIT window again.
UPDATE:
I found the code(as below) which is not allowing me to open the 'EDIT' dialog the second time and I commented it . But commenting the code caused another problem i.e. when I click on 'CANCEL' or 'APPLY' buttons it is throwing the following error and is not allowing me to open the 'EDIT' button again by throwing the same error.

You are destroying the widget on close (destroyOnClose : true), so it isn't available to open on the second attempt.
/*
* Overload the _destroyOrHide method in rmt.NewModalPopup so
* that the popup will be destroyed instead of closed. (Close
* doesn't remove the DOM node.)
*/

Befre creating the dialog box please add the below code :
if (dojo.byId('displayQualificationPane') != null) {
dojo.forEach(dijit.findWidgets(dojo.byId('displayQualificationPane')), function (w) {
w.destroyRecursive();
});
}
dojo.destroy(dojo.byId('displayQualificationPane'));
if (dijit.byId('displayQualificationPane')) {
dijit.byId('displayQualificationPane').destroy();
}
It will destroy the widget everytime before creating it.

Another technique, similar to Himani's recommendation, but perhaps easier to use, is to ensure that the dialog contents are destroyed after the hide function is called. This way, you don't have to do any complicated checks for this when initializing your components.
hide: function() {
this.inherited(arguments);
window.setTimeout( dojo.hitch( this, 'destroyRecursive' ), 500 );
}
Or perhaps even
aspect.after( dialog, 'hide', dojo.hitch( this, function() {
setTimeout( function() {
dialog.destroyRecursive();
}, 500 );
}));