In ngx-bootstrap 7.0.0, dropdown is not closed after clicking on another one - ngx-bootstrap

Versions:
ngx-bootstrap: 7.0.0
Angular: 12.1.3
Bootstrap: 4.6.0
Clicking on a dropdown button after another dropdown is opened, the first dropdown is not closed.
But in ngx-bootstrap#6.2.0, it didn't happen.
How can I solved this issue? Any idea?

I ran into the same problem today. Turns out this is an unsolved issue that's been looked at by the Angular bootstrap Community. My guess is that it will be resolved soon.
https://github.com/valor-software/ngx-bootstrap/issues/6248
However as a work around:
An element with the dropdown-menu class is shown by adding the show class.
So you could give every menu a ref:
<ul class="dropdown-menu" #menu1>...</ul>
<ul class="dropdown-menu" #menu2>...</ul>
And upon a click event on any dropdown navigation item, trigger a function that removes the show class on all of these elements.

Related

Vue table row-contextmenu event not firing?

I would like to open a custom context menu whenever the user clicks on a table cell in my vue page. So I'm trying to use the row-contextmenu event as defined here, but it doesn't fire.
Table in the template:
<b-table #row-clicked="leftClicked" #row-contextmenu="rightClicked" border no-border-collapse striped :fields="fields" hover :items="items"></b-table>
Vue methods:
leftClicked() {
alert("clicked");
},
rightClicked() {
alert("right clicked")
}
The standard row-clicked event works fine and gets fired when i left-click on any row in the table. row-dblclicked also works fine. However, the row-contextmenu event doesn't even get fired to begin with and the standard browser context menu appears, even if i use #row-contextmenu.prevent (Chrome & Firefox). There are no errors in the console in both browsers.
The examples on bootstrap-vue and jsfiddles work fine in both browsers. So it seems to be a local problem?
Thanks for any help :)
It turned out that my bootstrap-vue version was too old. I upgraded to 2.14.0 and everything is working fine.

Bootstrap / ngx-bootstrap - drop down mutiple checkbox option

On our current Angular 5 project, we use bootstrap 3.3.7 and ngx-bootstrap 2.0.3
I have been asked to implement a dropdown multi-select option as shown below. It will allow user to select multiple options from dropdown list.
How can I implement this feature?
You can create a dropdown using ngx-bootstrap and then add <input type="checkbox" with labels for a description within in menu item li.
It turns out neither of these frameworks support such component.

Select was changed to select2 and broke my dropdown list test

Getting error: org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
public analyticsLandingPage verifyReportingProfile() throwsInterruptedException{
Select select = new Select(driver.findElement(By.className("select2-choice")));
select.selectByVisibleText("Arria");
return PageFactory.initElements(driver, analyticsLandingPage.class);
}
This is my HTML page:
<div id="s2id_reporting_profile_id" class="select2-container select2-allowclear reporting_profile select2-container-active"
style="width: 50%;">
<a class="select2-choice" tabindex="-1" href="javascript:void(0)">
<span id="select2-chosen-7" class="select2-chosen">AdOps Reporting Profile</span>
<abbr class="select2-search-choice-close"/>
How can I make it work ? I need it to click on dropdown list and select element. Thanks
Usually this is caused because you have to click a button on the front-end before Selenium can register the dropdown. A lot of times this is caused by a javascript call. Have you tried clicking on the div:
id="s2id_reporting_profile_id"
And then clicking on the select2-choice option?
It could also be this:
select.selectByVisibleText("Arria");
Is there text visible on that element after you click it? Or does another element show up from href="javascript:void(0)" when select gets clicked? If that's the case you need to click it in Selenium.
If this doesn't help, your question is very vague, maybe you could edit it to have it make more sense? Help us help you trouble shoot the problem!

Materialize Create and Open Modal

I wan't to create a Modal with Materialize and Open it with a Button click. I used the code from the Modal page but it is somehow not working. Maybe someone can help.
I know some guys posted a similar question but none of them is answering my question.
For the modal example to work with a button to trigger the modal you'll need initialize the button using JavaScript. Be sure that you have included both jQuery, and both JavaScript and CSS from materialize—see the getting started guide.
To initialize the modal (or all modals) you'll invoke the leanModal() method on it:
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
The "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered.
Example modal button:
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Click to open modal</a>
This button would open a modal with the id modal1.
See this code pen for a working example.

Selenium webdriver : Unable to click a link (Not inside iframe- able to print gettext value from the webelement)

Please don't make comments regarding why i posted a similar question. I have tried many things and nothing is working. Below is the HTML
<div id="businessSettingsColumn1">
<div class="sectionLink">
Business details
</div>
<div class="sectionLink">
Operating hours
</div>
<div class="sectionLink">
Closed dates
</div>
<div class="sectionLink">
Appointment notifications
</div>
I need to click the second link
I have tried
1) webdriver.findElement(By.partialLinkText("Operating hours")).click();
2)webDriver.get(mylement.findElement(By.tagName("a")).getAttribute("href"));
3)
List<WebElement> businessLinks= busCol.findElements(By.className("sectionLink"));
for(WebElement bLink :businessLinks) {
if(bLink.getText().contains("Operating hours")) {
bLink.findElement(By.tagName("a")).click();
}
}
4) Using the Action builder to move the mouse and then doing a click
Also when i did this 3 times in a row , my element got clicked
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
webdriver.findElement(By.partialLinkText("Operating hours")).click();
I am using Firefox version 25.0 and Selenium version 2.35.0. Funny thing though is when i do a sysout , the values get printed and when i try to get the url using webdriver I get "Element not found in the cache - perhaps the page has changed since it was looked up" .. its pretty much a static page with links only so i dont understand why i am not able to click it.. Any help will be much appreciated.
Can you try calling focus() on the element before you click on it?
This usually occurs because the element was there at some point, but then something happened and then it's no longer there for some reason. I encounter this frequently when a page makes AJAX calls for example.
Have you tried adding some waits so that selenium is sure that the element is ready?