I'm wondering if it is possible to modifiy the notification system of buefy so that it closes itself when I click anywhere on the notification, not just on the x-cross generated by closable: true.
I have been looking for solutions to change the default behavior of buefy elements, but I haven't found anything coming close (no pun intended).
Any help would be very much appreciated.
edit: I want to close the notification by clicking on it, not outside of it. But I don't know how to attach the onClick behaviour to the buefy element as a whole.
Actually you need to catch click anywhere on the page and then:
isActive = !isActive
The question how to catch click outside the element is answered here:
Detect click outside element
But watch out! Preferred answer is not working in Vue.js 2. You can try to use this package: https://github.com/MuTsunTsai/vue-on-clickout
You could use v-clickaway to detect click outside your element:
Vue-clickaway
and then set your flag to true
Related
I would like to click on a button but in code it is showing as
"button aria-disabled=:false". How to change this in "true" and click the link using cypress?
Generally, it's the disabled attribute not the aria-disabled attribute that prevents Cypress from clicking. Even so, you should identify the button by aria-label
cy.get('[aria-label="Expand Row"]').eq(0).click({force:true})`
There is a problem in the app, the data-test-id has undefined on the end which probably means the code that adds that attribute has a bug.
You would expect it to be something unique like data-testid="expander-button-1".
I used ":first-child" and then click on button.
cy.get('#row-0:first-child').click() and it works. Thank you all for your help.
You should simply be able to use .click() after the finding the element. aria-disabled=false would imply that the button is enabled (not disabled).
cy.get('[data-testid="expander-button-undefined"]').eq(0)
.click();
If that is not working, it may be inheriting a disabled state from the class, role, or type. Without seeing where exactly it would be disabled, I can't recommend a strategy other than using force: true.
cy.get('[data-testid="expander-button-undefined"]').eq(0)
.click({ force: true });
I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here
Hellow guys, please guide me to solve issue.
I am able to access all fields inside the iframe which is in div, I want to close iframe but I am unable to access (X) button.
The close button is outside iframe and inside div.
Here is my code:
To switch into iframe from main window:
BaseClassOne.driver.switchTo().frame(BaseClassOne.driver.findElement(By.xpath("//*[#id='Dealership quote Internal']/iframe")));
To access iframe element:
BaseClassOne.driver.findElement(By.xpath("//*#id='txtDealershipRef']")).sendKeys("XYZ090123");
I tried below mention code to close modal popup window:
BaseClassOne.driver.findElement(By.tagName("a")).click();// throwing no such element exception
BaseClassOne.driver.close();// this is closing browser instance
BaseClassOne.driver.switchTo().defaultContent();
// modal pop-up is not closing hence not able to access main window element
Please guide me.
Thanks in advance.
According to the above comments and discussions, I feel that you have to switch back to the default frame and then try to click on the close button.
driver.switchTo().defaultContent();
There seems to be an issue with the code sequence. Considering the close link is not contained in the iframe you have to switch to default content first and then click on close before proceeding. Try the following code:
//Switch to frame and perform actions
BaseClassOne.driver.switchTo().frame(BaseClassOne.driver.findElement(By.xpath("//*[#id='Dealership quote Internal']/iframe")));
BaseClassOne.driver.findElement(By.xpath("//*#id='txtDealershipRef']")).sendKeys("XYZ090123");
//switch to default content (to access elements outside the frame)
BaseClassOne.driver.switchTo().defaultContent();
//click on close
BaseClassOne.driver.findElement(By.xpath("//a[#class='close-window']")).click();
Note: the identifier for the close button has been changed in the code here to use the properties from the HTML sinceBy.tagName("a") which is a part of the code in the question could possible have many matching nodes which are higher up in the HTML hierarchy.
There's a single button element on the page and the following click stream:
let submitClick$ = sources.DOM.select(buttonSel)
.events("click")
.mapTo(true)
.debug(console.log)
Once I click on the button, true is logged, which is correct.
However, when I map the stream, the code inside runs twice:
let submitDeal$ = submitClick$.map(() => {
console.log("Clicked")
// ...
})
No other event handlers should be attached to the button, and the element itself sits inside a div:
button(".btn--add", "Submit")
The usual event.preventDefault() and event.stopPropagation() doesn't make a difference, and inspecting the event does show that it is fired from the same element button.btn--add.
Not really sure what's going on, any ideas are appreciated! Thanks!
Versions:
"#cycle/dom": "^12.2.5"
"#cycle/http": "^11.0.1"
"#cycle/xstream-run": "^3.1.0"
"xstream": "^6.4.0"
Update 1: I triple checked and no JS files are loaded twice. I'm using Webpack that bundles a single app.js file that's loaded on the page (Elixir/Phoenix app). Also when inspecting the button in the Event Listeners tab in Chrome's Developer Tools, it seems that only 1 event handled is attached.
Update 2: Gist with the code
Too little information is given to resolve this problem. However some things come to mind:
You shouldn't use .debug(console.log) but .debug(x => console.log(x)) instead. In fact .debug() is enough, it will use console.log internally.
Then, is the button inside a <form>? That may be affecting the events. In general this question needs more details.
Turns out this was due to a bug in xstream, which was fixed in xstream#7.0.0.
I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.