I need to detect the moment when a slot content rendered into my web component. I use slotchange event to track it. It works fine for all the browsers except iOS 11 (for iOS 13+ works ok). Could someone suggest how to do it properly?
So from the next code, I expect to see "firstUpdated" and "slotchange" messages in the console after the page is rendered. But for iOS 11 I have only "firstUpdated".
firstUpdated() {
console.log("firstUpdated");
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
console.log("slotchange");
});
}
Here is a sandbox:
https://codesandbox.io/s/minimal-litelement-vanilla-wy61t?file=/src/index.js
and URL to see the result:
https://wy61t.csb.app/
Older versions of Safari handled slot change events wrong - firing them before the elements were added to the DOM. I think firstUpdated is firing after the slot change has. Try using #slotchange=${... syntax instead, though even if that works it will fire out of order.
If that fails you may have check for the assignedElements manually to work around the Safari bug.
Related
Puppeteer 2.1.0
jest-puppeteer 4.4.0
Win 10 64bit
I have this situation https://i.imgur.com/JbcQAhB.png
I want to click the green button but the notification is in my way.
My code:
selector = "//main/div[1]/div[2]/button[1]"
await page.waitForXPath(selector)
const elementHandle = await page.$x(selector)
await elementHandle[0].click()
This code won't click the button, and I know is the notification, because if before the click() I put a waitFor(5000) and close the notification manually then it works just fine
I also tried in the chrome console directly like this, and it works just fine with the notification in front
$x("//main/div[1]/div[2]/button[1]")[0].click()
Also this kind of code should work for headless mode, so the fact that the notification is "In front" should never be an issue.
Possible questions:
Are you using headed mode? Yes, I have to. I'm testing using chrome extensions.
Using Xpath instead of selectors? Yes, I have no option as well, I have to use xpath
Why no closing the notification? It could work (and actually it does for this particular situation), but that's not the only notification that popUps, more of those show up and messes up with other similar buttons. I need to click the button behind the notification
Thanks!
I found a way, I just changed the await elementHandle[0].click() for await page.evaluate(x=>x.click() , elementHandle[0])
I'll leave the question here, hope somebody find it useful
After utterly disbelieving our client when they claimed they couldn't type full stops (periods) into the HTML Editor control of the Ajax Control Toolkit on their ASP.net site, I've now sadly been forced to accept it is the case.
When you press the . key, and the cursor is at the final position in the editor nothing is added to the HTML Editor control at all.
If there are any characters after the cursor position, the . works normally.
If you hit return to enter a newline, and press . it works once.
This only only occurs in IE 11, older versions of it are fine, as are Chrome, Firefox and Safari. We are using the September 2013 release of Ajax Control Toolkit.
Has anyone else encountered this? Any advice would be much appreciated.
After doing more googling specifically around AjaxControlToolkit and IE11, I found a number of people complaining about problems with the current version of ACT (the Sept 2013 release) and IE11.
e.g. Here, here and here
It seems the problem is with .net failing to identify IE 11 as an IE browser, causing various AjaxControlToolkit features to fail.
The workaround I'm using at present is to add the X-UA-Compatible http header to our site, to force IE11 to process the page with in IE10 mode.
<meta http-equiv="X-UA-Compatible" content="IE=10">
There is also this .net4 hotfix from Microsoft which should fix the problem completely when applied to your web server.
Hope this helps someone else.
I found a similar problem with v3.0.30930 in Chrome, I tracked it down to the DesignPanelEventHandler. Specifically when conditionally dealing with deletions in various browsers when clicking the backspace button. In certain situations the code looks for a keycode of 46 or Sys.UI.Key.backspace, however in Chrome the full-stop keycode on keypress is also 46, causing all sorts of problems and finally meaning the event is stopped and the full-stop is never entered into the panel.
I overrode the DesignPanelEventHandler functionality and added the following condition in before the deletion logic and stopping the event (around about line 503 in HTMLEditor\DesignPanelEventHandler.js). As far as my tests go this seems to work fine:
if (key != String.fromCharCode(Sys.UI.Key.backspace).toLowerCase())
break;
I have a web page that have few dropdowns and when the dropdown item changed it refresh the page and reloads.
so now i am writing script against that page and i have noticed that whenever my scripts select the text from the dropdown my browser get minimized.
my questions, is there any setting to make sure my browser is maximized while running the script?
Here is the code that SelectText from the dropdown:
public void SelectText(By locator, string txt)
{
IWebElement element = driver.FindElement(locator);
SelectElement selectelement = new SelectElement(element);
selectelement.SelectByText(txt);
}
I am using
IE 8
Selenium 2 WebDriver
C#
I strongly suspect that the browser is actually being dropped to the bottom of the Z-order, not minimized. That is to say, it's being pushed to the bottom of the stack of open windows on your desktop. If you have other applications running, and they're running maximized, it can appear as though IE has been minimized, but it really isn't. There are certain actions that are known to cause IE to behave this way, but no one has been able to figure out why yet.
Maximizing the IE window won't solve the problem. Nevertheless, you can maximize the IE window using
// WARNING! Untested code written from memory
// without the benefit of an IDE. Not guaranteed
// to be syntactically correct.
driver.Manage().Window.Maximize();
I have a JavaScript class that displays a partially-opaque div over top of the content of another div when an Ajax request is sent to the server.
When the request returns, the JavaScript class hides the partially-opaque div....it works great...sort of.
Right now, in IE9, when the Ajax request is complete, the partial-opacity is only hidden if the user moves their mouse.
So, my question is, how do I force the browser to do what it's supposed to do?
This is my extremely simple function that is called after the request returns to the browser:
_hideBlockingDiv: function() {
if (this.get_blockingDivClientID()) {
var blockingElement = $get(this.get_blockingDivClientID());
if (blockingElement != null) {
blockingElement.style.display = 'none';
//I know that this method is executing correctly because I "hi" showed
//up properly...but the element remained visible:
blockingElement.innerHTML = 'hi';
}
//if I add the alert then everything works fine in IE9
//if I don't then the page will remain the same until the user moves their mose
//alert("done");
}
}
Please note that I am not using JQuery.
I am using the AJAX.NET library since I am a .NET developer (and JQuery didn't become popular until years after I implemented my Ajax-enabled server controls)
Thanks
-Frinny
How and where do you call the _hideBlockingDiv function from? Since you are using MS Ajax library, you might want to have a page loaded handler on client side and call this function from within that handler. So basically
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
_hideBlockingDiv();
});
Hope this helps!
It turns out that the problem only exists in the beta version of IE9 that I was using at the time. This problem went away once the full version of IE9 was released.
I am using fullcalendar from arshaw.com/fullcalendar for displaying events on a corporate intranet calendar. I had the className attribute working, made a couple changes to some code and now cannot figure out why it's not working. Here is the json that is returned from my service
[
{
"allDay":true,
"className":"corporate",
"editable":null,
"end":null,
"id":null,
"start":"2010-07-05T00:00:00.0000000",
"title":"4th of July Holiday (Day Off)",
"url":"\/en\/EmployeeResources\/Calendar\/Corporate\/2010\/07\/4th_of_july_holiday.aspx"
}
]
everything works fine, except for assigning the 'corporate' className to the event items on the calendar.
This is the code that I'm using on document.ready to load the calendar events, which again, works fine, it's just the className's that I'm having trouble with
$("#calendar").fullCalendar('addEventSource', '/layouts/calendar/SitecoreCalendarEventsHandler.ashx?calendar=Corporate')
I'll also note, I'm using the latest version from arshaw.com (1.4.6)
nevermind, it seems that it was being generated, web developer toolbar was not showing the class being added, but when I viewed generated source, that showed the class name. I had some messed up CSS, which was why the style appeared to not be showing up