problems with numberinput about xel HOT 19 CLOSED

I'm sorry, but I don't really know what Angular is doing under the hood that is causing this bug to occur. I can fix it if you can reproduce it with plain DOM or someone else who knows Angular figures it out.

from xel.

Had a lot of testing and searching today on this – really no luck. The numberinput is returning for me null as value... Using x-input is working (but not so cool looking):

	<div class="col-4">
		<x-input type="number" class="small" skin="condensed" ng-value="canvas.getWidth()"  suffix=" px" ng-model="width">
		</x-input>
	</div>
	<div class="col-1">
	</div>
	<div class="col-4">
		<x-input type="number" class="small" skin="condensed" ng-value="canvas.getHeight()"  suffix=" px" ng-model="height" >
		</x-input>
	</div>

	<div class="col-3"></div>
	<div class="col-4 centered_sm">Width</div>
	<div class="col-1"></div>
	<div class="col-4 centered_sm">Height</div>

	<div class="col-3"></div>
	<div class="col-9">
		<x-button skin="textured" style="width:197px;" ng-click="setNumeric(width, height)">
			<x-box>
				<x-label>Apply</x-label>
			</x-box>
		</x-button>
	</div>

But what exactly do you mean with reproducing in plain DOM? Just manipulate some DIV elements with the angular function instead of farbric.js? Would really love to use XEL with angular...

from xel.

Forgot to mention: "ng-value" and "ng-click" is working fine. The problem seems to be on "ng-model" – dokumented here (SHOULD even work with custom form controls):

https://docs.angularjs.org/api/ng/directive/ngModel

from xel.

But what exactly do you mean with reproducing in plain DOM? Just manipulate some DIV elements with the angular function instead of farbric.js? Would really love to use XEL with angular...

I mean a minimalistic demo that demonstrates the bug and does not rely on any frameworks as I have no experience with Angular and I don't understand what the code above really does.

from xel.

Forgot to mention: "ng-value" and "ng-click" is working fine. The problem seems to be on "ng-model" – dokumented here (SHOULD even work with custom form controls): https://docs.angularjs.org/api/ng/directive/ngModel

Are you sure that by "custom form control" the documentation means any custom elements like x-numberinput rather than some Angular-specific stuff?

It's strange that it works with x-input but not with x-numberinput as they have very similar API and implementation.

from xel.

One major difference between x-input vs x-numberinput is that the latter does not dispatch input events. Perhaps Angular relies on those events being dispatched somehow?

from xel.

One major difference between x-input vs x-numberinput is that the latter does not dispatch input events. Perhaps Angular relies on those events being dispatched somehow?

This could be indeed the problem. Do you have a chance/time to change this (if it is possible to change) so that I could give this a try? My coding knowledge is simply not sufficient for such a task...

But Angular and Electron are really good friends, so the deserve a great UI :-)

BTW: would be great to have XEL on CDN so, that we could build some codepen starters for testing code. I was trying to setup a starter via gist and also with a deploy of xel on one of my servers but unfortunately this is not working.

Regarding minimalistic example: it is an Angular to XEL related problem, so making something without angular woul not make a sense :-)

from xel.

I will add the "input" event if someone can confirm this is indeed the root cause of the bug.

Linking Xel from CDN or anywhere else other than ./node_modules/xel/ is not going to work because of how I'm currently resolving relative URLs. This might change once I migrate the code away from HTML imports to ES6 modules after Chrome 61 becomes stable.

from xel.

Wait a second: what is the output of the x-numberinput? Are you also transmitting the prefix and suffix - so is it an array? Or just the number?

from xel.

What do you mean specifically by output? The <x-numberiput> "value" property should have a number value in case of DOM property and a numeric string value in case of an attribute, it should not contain the prefix or suffix.

from xel.

I am simply stuck on this...

<x-input name="name1" ng-value="canvas.getWidth()" ng-model="width"> </x-input>

is working fine - console is showing the defined value

<input name="name2" ng-value="canvas.getWidth()" ng-model="width" />

is working fine - console is showing the defined value

<x-numberinput class="small" skin="condensed" ng-value="canvas.getWidth()" suffix=" px" ng-model="width"> <x-stepper></x-stepper> </x-numberinput>

is simply not working - console is showing "null"

The only thing that I see in my console when I enter some values in the x-numberinput is:

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

Any idea? Would really love to stick with Xel, but I need numberinputs... Would that be so hard to dispatch the input events on the x-numberinput (sorry for ignorance here)...?

from xel.

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

Are you still getting this error with Xel version 0.0.52?

from xel.

can I update to 0.0.52 via npm somehow?

from xel.

Yes, version 0.0.52 has been released on NPM. You could install it e.g. by running npm install [email protected] in your project root directory.

from xel.

OK, Cool! I see now also "xel.min.js" in my directory. Is this something new (undocumented)?

from xel.

Anyhow,

xel.min.html:6993 We don't execute document.execCommand() this time, because it is called recursively.

is gone now but my function still not working...

from xel.

xel.min.js contains the same compiled scripts as xel.min.html, I have provided it because Chrome Platform apps can't use xel.min.html due to content security policy restrictions.

I didn't bother documenting it because both files will be gone in a month or two anyway (I'm planning to switch to ES6 modules as soon as they are supported in stable Chrome and Electron releases).

from xel.

Apparently We don't execute document.execCommand() this time, because it is called recursively warning was unrelated to the original bug you have reported.

I'm currently busy working on another project, I'm planning to resume work on Xel and take deeper look at all reported bugs in September.

from xel.

Xel project underwent a major rewrite recently and it is now using ES6 modules. If you can still reproduce this bug, please report it on https://xel-toolkit.org/issues.

from xel.