0

Strange behaviour Onchange event which got fired on initial load .I need to hide the button on initial load. How to overcome this behaviour. Attaching here part of code. Thanks in advance.

Updated info: I could able to figure about where it is calling. Onchange event is called during onload only for picklist list field. Once I remove onChange event only on picklist. I am having expected behaviour. There is an article about it. help.salesforce.com/… .. However I need to have an Onchange event for picklist. The referred article suggest to validate onload if the value is changed from UI. Do you have idea of how we can achieve this?

 <td> <div class="slds-form-element"> <div class="slds-form-element__label" > <label for="horizontal-output-id-01">Status</label> </div> <div class="slds-form-element__control"> <lightning-input-field id="fid2" field- name="Status__c" variant="label-hidden" style="width:50%" onchange={HandleInlineEdit}> &nbsp; </lightning-input-field> </div> </div> </td> <div if:true ={isEditable} class="slds-align_absolute-center" style="padding:5px;"> <button class="slds-button slds-button_brand" name="ClickSave" type='submit'>Save</button> <button class="slds-button slds-button_neutral" onclick= {canceledit}>Cancel</button> </div> @track isEdit=false; //Init connectedCallback(){ this.isEdit=false; console.log('editt' , this.isEdit); this.ExpSecClass = 'slds-section slds-is-open'; } HandleInlineEdit(evt){ console.log('hANDLEedit' , this.isEdit ); this.isEdit=true; } get isEditable() { console.log('edit' , this.isEdit ); return this.isEdit ;}
Improve this question
2
  • Do you want to hide ClickSave and Cancel buttons on init? Commented Sep 1, 2020 at 3:58
  • Yes. I would like to show that button only when there is any change in input field (OnChange). However Onchange is called during initial load Commented Sep 1, 2020 at 3:59

1 Answer 1

Reset to default
0

@athi i think the problem is that the isEditable is not reactive. when the component gets load, isEditable is not called.

To hide buttons you can use isEdit as field

<div if:true={isEdit} class="slds-align_absolute-center" style="padding:5px;"> <button class="slds-button slds-button_brand" name="ClickSave" type='submit'>Save</button> <button class="slds-button slds-button_neutral" name="ClickCancel" onclick={canceledit}>Cancel</button> </div> 
 @track isEdit = false; //Init connectedCallback() { this.isEdit = false; console.log('editt', this.isEdit); this.ExpSecClass = 'slds-section slds-is-open'; } HandleInlineEdit(evt) { console.log('hANDLEedit', this.isEdit); this.isEdit = true; }

or make isEditable a public property

<div if:true={isEditable} class="slds-align_absolute-center" style="padding:5px;"> <button class="slds-button slds-button_brand" name="ClickSave" type='submit'>Save</button> <button class="slds-button slds-button_neutral" name="ClickCancel" onclick={canceledit}>Cancel</button> </div> 
 @track isEdit = false; //Init connectedCallback() { this.isEdit = false; console.log('editt', this.isEdit); this.ExpSecClass = 'slds-section slds-is-open'; } HandleInlineEdit(evt) { console.log('hANDLEedit', this.isEdit); this.isEdit = true; } @api get isEditable() { console.log('edit', this.isEdit); return this.isEdit; } set isEditable(value) { }
Improve this answer
6
  • Thanks for your detail response. Actually I don't want to call isEditable during load. It is actually happening. I am looking way to prevent it. Do you know why isEditable() called during load. Commented Sep 1, 2020 at 14:00
  • You should find the answer at the end of this article Data Binding in a Template Commented Sep 1, 2020 at 14:42
  • I could able to figure about where it is calling. Onchange event is called during onload only for picklist list field. Once I remove onChange event only on picklist. I am having expected behaviour. There is an article about it. help.salesforce.com/… .. However I need to have an Onchange event for picklist. The referred article suggest to validate onload if the value is changed from UI. Do you have idea of how we can achieve this? Commented Sep 1, 2020 at 18:52
  • No really, but now you should ask a question on how to solve this issue. Commented Sep 1, 2020 at 19:57
  • Thank you. Updated the question. Commented Sep 1, 2020 at 20:00

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.