Not able to get the event's original source on LWC.
Hi,
We are migrating an Aura component to LWC. We have a USE CASE, is being used in an iteration.
On click of , we are showing . The data in is dynamically retrieved based on record-id of .
In Aura, this was fairly simple because when fires an event, we can inject the data through method from grand parent to event.getSource().
But in LWC, the event is getting re-targeted on every parent-level bubbling. So finally event.target is returning the instead of .
Hence we are not able to inject data dynamically through event. What is the best approach for this scenario?
<!--c-todo-app>
<c-todo-item>
<div>
<!--Dynamic Iteration--Starts>
<c-todo-line-item>
<c-sub-item>
<c-todo-line-item>
<c-subitem>
--
...
...
...
--
<c-todo-line-item>
<c-subitem>
<!--Dynamic Iteration--Ends>
</div>
</c-todo-item>
Event.target OR event.currentTarget should give the source component but instead gives the top-most component below the handling component. In above example- event is fired in and handled in . Component returned is BUT we need
Related
I have a parent and child components
ShowreelApp.vue and Showreel.vue. I am passing properties over to the child when I create it.
<showreel-component
v-for="showreel in showreels"
v-bind="showreel"
:key="showreel.id"
#update="update"
#delete="del"
></showreel-component>
I then use the props to populate an update form in each child showreel.
<div class="showreel-input">
<label>Heading</label>
<input type="text" :value="myHeading" >
</div>
In the child form I am emiting an update event to the parent component to update the specific showreels data.
update(event) {
this.$emit('update', this.id, this.heading, this.subheading, this.youtubeid);
}
When the user clicks on the update button on the child Showreels components form I would like to send the data to the parent.
However I cannot bind the data to the child's input field as that causes the warning about mutating the property as I should not be updating the value from the child form.
One option I thought of was creating duplicates of each value in the child ... Updating them to the passed in props when its created , binding them to the form inputs... and then passing these values over to my parent using emit when updating.
But then these seems a bit convoluted to me and now I am thinking I have gone about this the wrong way. Any suggestions would be appreciated.
Mutating props from a child is usually not a very good practice but if you need it, as of version 2.3+ there is a .sync modifier. For more reference see Sync modifier
Another solution is to use event emitting or VueX. I would personally recommend Vuex but if you have relatively small application go with either sync or event emitting as you have described.
I should have mentioned that each showreel component has its own form fields and update button.
The solution I have come up with is to create a "sync" event in the parent and emit to it from the child
sync(id, property,value){
var currentShowreel = this.showreels.find(showreel => showreel.id === id);
currentShowreel[property] = value
},
The sync event calls a method in the parent which takes in and ID proprty name and property value.
This generic method is called from the child element inputs with a method
#keyup="sync('heading', $event.target.value)"
This calls a method in the child which in turn updates the parents data
},sync(property, value){
this.$emit('sync', this.id, property, value);
}
Then when the user updates I simply emit the update event to the parent. The parent grabs the particular showreel items data and updates based on the latest values.
It's working but not sure this is the right way of doing this.
I am experimenting cobrowsing with Angular 6 Forms.In co-browsing an opensource library togetherJS updates the DOM value of corresponding element for remote party.I have updated togetherJS related code in index.html(two line one in head and another in body) I have observed using ControlValueAccessor Form type DOM value of corresponding element is getting updated but FormControl value is not getting updated in view.
My question is how changes done by an external library on DOM elements can be reflected into angular 6 form control's element value in view.
One can get the code from below link:
https://github.com/srigaurav1986/Angular-Forms.git
How to reproduce:
1.Download code from above link.
2.Install dependencies using "npm install"
3.Run "ng serve -o"
4.open in browser "http://localhost:4200/controlvalueaccessor"
5.Click on "Start TogetherJs"
6.Copy the popped link in another browser window.
7.Update the "Name" field
We can see DOM field value is also getting updated on remote side but after pressing "Submit" button we can see FormControl value remains unaltered on remote side but changed on other side.
I tried using manually detecting changes using application.tick,markforcheck() and detectchanges() apis but no luck.Is there a way, where we can listen to some event on DOM element change and subscribe to it and also update the Formcontrol parameter values in such case.
The answer to this question lies in angular(6) property that it works on shadow DOM and only listen to the changes happening within angular zone , when the third party library like TogetherJS updates DOM corresponding changes doesn't effect angular components as they are not subscribe to actual DOM native element.
In order to resolve this issue we did following :
Register one call back in Form class constructer to capture DOM “change” events triggered from Co-Browsing library i.e. happening outside angular zone as mentioned below:
Code Snippet
constructor(private formBuilder: FormBuilder,private elementRef: ElementRef,private _renderer: Renderer,private cdr:ChangeDetectorRef,private app:ApplicationRef,private zone:NgZone) {
zone.runOutsideAngular(() =>{
window.document.addEventListener('change', this.change.bind(this));
})
}
Define the eventHandler to perform below actions :
Run in Angular context using this.zone.run()
Use ElementRef to get the component’s template selector.
Run queryselector on input elements and compare with event’s outerHTML to check which element has changed in component.
Set the Formcontrol’s value for matching element.
PS: Here customerForm is ControlValueAccesor FormGroup type of instance. In your case it can be your form. We can generalize form( In case reactive) key traversal as mentioned in another SO post
Angular 2: Iterate over reactive form controls
Code Snippet:
change(event){
event.preventDefault();
console.log("DOM value changed" ,event);
console.log("component value", this.elementRef.nativeElement);
this.zone.run(() => { console.log('Do change detection here');
//this.cdr.detectChanges();
if(this.elementRef.nativeElement.querySelectorAll('input')[0].outerHTML === event.target.outerHTML)
{
console.log('Inside value updation');
//this.customerForm.controls.name.value=event.target.value;
this.customerForm.controls['name'].setValue(event.target.value);
}
});
setTimeout(() =>{
this.cdr.markForCheck();
})
}
This will set the respective values of elements(obviously via traversing loop) changed in component and validation should not fail as it’s happening in current context.
The core idea of above details is how to capture change events happening outside angular zone and updating angular application accordingly.
PS : I shall update the full code in github for other's perusal.
I am trying to reuse the Form into my project components.
I have copy pasted the entire form folder from "/libs/foundation/components/form" to my project "/apps/mywebsite/components/form".
But when i am trying to use the form from mywebsite in the parsys the from shows only Start of the from.
Where as when i tried to use the form from the foundation in the same page parsys it shows both Start and End of the form.
Observation:
From the content, when i am using the foundation form the in the page content i can see the start and end nodes. where as when i am using the mywebsite form start node alone is created.
The form end is added/deleted by the fixStructure() method of the FormParagraphPostProcessor class. This post processor listens for creation and deletion of form start and form end paragraph and creates/removes the other paragraphs accordingly.
if ( ResourceUtil.isA(res, FormsConstants.RT_FORM_BEGIN)
|| ResourceUtil.isA(res, FormsConstants.RT_FORM_END)) {
if ( FormsHelper.checkFormStructure(res) != null ) {
logger.debug("Fixed forms structure at {}", contentResource.getPath());
}
}else {
fixStructure(res);
}
This class depends on the FormConstants.java where the form start(RT_FORM_BEGIN) and the form end(RT_FORM_END) are defined as "foundation/components/form/start" and "foundation/components/form/end" respectively. Due to this the post processor doesn't process the form start / end that is present within your project.
To make your custom form component working you may consider one of the following possible options:
Add the sling:resourceSuperType property for your project form start as "foundation/components/form/start". This would create a form end, but it would be of type foundation/components/form/end and not your project form end.
In case you do not want the default form end but your custom form end, then you may need to create a custom post processor which listens to your form start and end and fix the structure accordingly. This requires modifying few other java classes like FormsHelper.java etc, as they are also dependent on the FormConstants.java. Also make sure that the imports in the start.jsp are changed accordingly.
Finally, if you do not want to create custom classes, you can copy the default form start to "/apps/foundation/components/form/start" and make your modifications on top of it. But you need to be careful while using this approach as this is a global change and would affect the other projects that are using the default foundation form start.
I have a big problem with Tapestry 5.3.6..
I have a form with a custom simple mixins that implies that form's ids couldnt' be modified :/
So i have this :
<form t:type="form" t:id="formId" t:mixins="aMixins" t:zone="zoneID">
<t:errors/>
<input t:type="TextField"/>
<a t:type="LinkSubmit" t:id="linkId"/>
</form>
<t:zone t:id="zoneID">
Something....
</t:type>
When I use the zone form attribute, the validation errors aren't displayed, how can i make the validation errors displays errors without include the form into a zone ?
I can't include this form into a zone because when my mixin is initialized, it put some listeners on some DOM elements and when i submit my form, the form is reloaded (because of the zone) and reload the mixin too, which add some more listener on new DOM elements and after the submit an event is fired which is catched by corresponding listeners, but some of listeners are linked to unexistant elements and the js crash.
Thanks a lot for your reponses
1 .
I have a form with a custom simple mixins that implies that form's ids
couldnt' be modified
This is not implied. Maybe, it's your requirement?
If not then to plug in your mixin into ajax rendering you need to make the mixin a bit more flexible.
In YourMixin class:
#InjectContainer
private ClientElement element;
void afterRender() {
String elementId = element.getClientId();
JSONObject spec = new JSONObject();
spec.put("elementId", elementId);
jsSupport.addScript("new MixinHandler(%s)", spec.toString());
}
This is just a hint, take a look at Autocomplete implementation (class, javascript) for a complete sample.
2 .
When I use the zone form attribute, the validation isn't working
This sounds doubtful.. I guess validation errors are not visible because you do not update the form itself and its <t:errors/> tag.
This can be verified if you set break points into FAILURE and SUCCESS event handlers of the form in your page (see org.apache.tapestry5.EventConstants).
Here's a simplified example of what I'm trying to achieve: http://jsfiddle.net/easLc/
HTML
<div class="bar">
<div class="apple"> apple</div>
<div class="banana"> banana</div>
<div class="citrus"> citrus </div>
</div>
jQuery
function showAlert(event) {
inventory = event.data.inventory;
alert(inventory);
}
fruits = ["apple", "banana", "citrus"];
inventory = [13, 45, 99];
for (i in fruits) {
$(".bar ."+fruits[i]).on("click", {inventory:inventory[i]},showAlert);
}
The inventory data I'm passing to the handler is dynamic, not static like the example. I'm getting the inventory data from asynchronous calls. After each time the inventory data is updated, I want to pass this data to the handler instead of have the handler get that information again.
What I'm noticing is on some clicks, the handler (I think) is crashing my browser. Am I creating too many handlers inadvertently? How do I see what handlers were created? Or what happens during the click event? I tried adding some console.log to the handler but I don't see them in the console.
Thanks!
Try
$(".bar ."+fruits[i]).off('click',showAlert).on("click", {inventory:inventory[i]},showAlert);
This will remove the previously bound event and rebind it... But it is hard to determine if it is the real source of the problem. You can add a console.log('text') in showAlert to see if it is being called more than once.
You can prevent multiple bindings by adding some sort of data to the element once it's been bound (a clean way would be a class, but meta-data may be preferred by standards):
$(".bar ." + fruits[i]).not(".bound").on('click', {...}).addClass('bound');