In svelte if I setup a <select> control like this:
<select bind:value={selected} on:change="{() => changeTheme()}">
the change event fires correctly and the value is bound but I get a warning in vscode:
(!) Plugin svelte: A11y: on:blur must be used instead of on:change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.
If I change the binding to on:blur as described, the event only works if you click elsewhere in the page after you make your selection (causing the select control to lose focus). on:click kind of works, but is annoying.
on:change seems correct - how do I clear this warning?
All you need to do is put a comment above the line with your select element.
<!-- svelte-ignore a11y-no-onchange -->
You will need to reload the window to clear the error. https://svelte.dev/docs#Comments if you're ever curious how to disable a warning in VS code it tells you the name of it after the warning, whatever is in the parenthesis goes after svelte-ignore.
Related
I'm trying to set the color of a label in Angular 2 depending on its email-validation like this:
<input type="email" name="email" [(ngModel)]="email" email #currentEmail="ngModel" [ngClass]="currentEmail.invalid ? 'error' : 'none'">
It works as expected on my page, however in Visual Studio Code I get the following error message:
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'error'. Current value: 'none'.
So my questions are:
Why does this message show up?
Whats the right approach to do this task?
Why does this message show up?
You can find a good explaination of why in this issue
This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - when bootstrapping the app prevents the exception from being thrown.
That said, it's being thrown for good reason: In short, after every round of change detection, dev mode immediately performs a second round to verify that no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.
In your plunk, you have the binding [attr.spinner]=isLoading, and isLoading changes as a result of your call to this.load(), which occurs when ngAfterViewInit is fired, which happens as a part of the initial change detection turn. That in itself isn't problematic though - the problem is that this.load() changes a binding but does not trigger a new round of change detection, which means that this binding will not be updated until some future round of change detection.
Whats the right approach to do this task?
Simply replace [ngClass] with [class]. I don't know why, but when trying to reproduce your issue in a plunker, I found out that [class] does not trigger the error.
Edit : use ng-invalid class
You can also style your element based on the angular class ng-invalid.
See this plunker
I have a preferences pane built using Cocoa bindings, and many of the options are check boxes. Some of these should only be editable if others are turned on. Here is an example - the indented (selected) box should only be enabled when the one above it is turned on:
To make this work I created two entries in my defaults, one for the value of each check box (the first two):
Testing this worked fine, I could turn the boxes on and off and the values were saved run-to-run as I expected. Ok, finally I want to link the enabled status of the second to the first:
And at that point, the entire system stops working - the preferences pane opens but it's empty. This prints in the output:
2016-02-25 08:46:04.691 SwiftNEC[49564:4153826] Failed to set (contentViewController) user defined inspected property on (NSWindow): Cannot create BOOL from object <_NSControllerObjectProxy: 0x618000003be0> of class _NSControllerObjectProxy
Un-binding this makes everything work again. Now unless I'm mistaken, the enabled value should be a Boolean, and the preferences definitely is a Boolean (as you can see). Can anyone offer an explanation of how to do this?
I'm running my code in debug mode in eclipse and in the middle of it, I want to change the size of a List,say from 9 to 6, by deleting 3 elements.
But I'm not seeing any option to do that, in fact what I'm seeing is the option to change the values present in the elements.
So how can I delete the elements itself from the List ?
Make sure you have the "Variables" tabs on eclipse "Debug" view focused on your current evaluated code.
In "Debug" view, right-click on "Value" cell inside the "Variables" table, and select "Change value".
You will have an option to write a Java expression so you can add something like:
yourList.add("newItem"); or: yourList.remove(0);
Make sure to reload the variable ("F5") once you are done and you will see the updated state.
Note that not every List implementation supports add() or remove() methods.
See this for more details if you encounter an exception.
See also:
Eclipse docs - Variables view
Eclipse docs - Change variable value
I was looking to do something similar. I had an ArrayList containing 1 element, and I wanted to remove it.
I tried #Leet-Falcon's answer, e.g. yourList.remove(0), and Eclipse replied "Unsupported operation exception".
What ended up working was : return new java.util.ArrayList<>();
Looks like the "Debug Shell" view allows this, or additionally if it's a simple enough list, the following simple Change Variable can also work:
new ArrayList<String>(java.util.Arrays.asList("1","2")) // or any other simple list
Modifying Java Collection (List) Variable in Eclipse Debugger
How to debug EL in the JSF page? I'd like to watch variable values, function calls an so on. The best solution would be an eclipse plugin, but any other possibility is better than guessing "Why this expression failed to render correctly?".
Closest what you can get in JSF/Facelets is placing an <ui:debug /> somewhere in the view:
<ui:debug />
Pressing CtrlShiftD should then show a popup window with debug information about the component tree and all available request parameters and request/view/flash/session/application scoped variables. It's basically a representation of the content of all those maps.
The hotkey is by the way configureable by hotkey attribute so that you can choose another whenever it clashes with browser default hotkeys, as it would do in Firefox; CtrlShiftD would by default show the Add bookmarks dialogue. Here's how you could make it to listen on CtrlShiftX instead:
<ui:debug hotkey="x" />
You'd usually also like to hide it in non-development stage, so add a rendered condition like that:
<ui:debug hotkey="x" rendered="#{facesContext.application.projectStage == 'Development'}" />
In the shown debug information, the information provided about scoped variables isn't that great as you would expect. It only shows the Object#toString() outcome of all scoped variables which defaults to com.example.Bean#hashcode. You can't explore their properties and the values of their properties directly like as you could do in debug view of Eclipse's debugger. You'd need to implement toString() on the class accordingly so that as much as possible relevant information is returned (if necessary, you can even let Eclipse autogenerate it by rightclick source code > Source > Generate toString()):
#Override
public String toString() {
return String.format("Bean[prop1=%s,prop2=%s,prop3=%s]", prop1, prop2, prop3);
}
As to method calls, just put a breakpoint on the Java source code the usual way. Eclipse will kick in there as well when EL calls the method. If it's a managed bean, you'll also just see its properties in the Eclipse debugger.
If you are really having problems then if you can get the source for the EL implementation (easy enough for the RI) then you can use Eclipse to set breakpoints in the EL implementation methods. You need to get an understanding of how the EL code works, but it isn't that complicated. Not for the very faint hearted though.
Another possibility would be to create and evaluate the EL programatically. There are examples of how to do this around. You can then use the debugger to fiddle around with what the expression is and what the result is until you've worked out where your problem lies.
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.