Open one Inplace editor at a Time

[Aditya Sastry]

Hi Team,

We are using in-place editor on our forms. We are facing an issue that if we are clicking on one field to edit and without closing that field if we click on some other field to edit it is not closing the previously opened in-place editor.

The requirement is to show a single in-place editor at a time if the user clicks on another field the previously opened in-place editor should close.

Please help to resolve this issue.

Thanks,

[Revanth Krishnan]

Hi Nabeen, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “We are facing an issue that if we are clicking on one field to edit and without closing that field if we click on some other field to edit it is not closing the previously opened in-place editor. The requirement is to show a single in-place editor at a time if the user clicks on another field the previously opened in-place editor should close.” 

 

We tried to reproduce the issue from our end by rendering multiple in-place editors in the form and the in-place editor closes when trying to open the other in-place editor in the form and we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/angular-xeswzc-yhmdnf?file=app.component.html 

 

By default, when the in-place editor is focused out the in-place editor submits and the editor is closed, this can be configured with the property ‘actionOnBlur’. We suspect that the issue may have occurred because this property is configured with “Ignore” in your application which doesn’t close the in-place editor. Please check the below sample to configure the ‘actionOnBlur’ property, 

 

Code Snippet: 

<ejs-inplaceeditor #inplace_editor mode="Inline" [model]="overviewModel" type="Text" value='Andrew' actionOnBlur="Cancel"> 

</ejs-inplaceeditor> 

 

Sample: https://stackblitz.com/edit/angular-ymvvy4?file=app.component.html 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/inplace-editor/#actiononblur 

 

Please ensure the above-mentioned property and check the issue once in your application. If the issue still occurs please share the following details, 

• The code snippet of the in-place editors used in the form.
• The exact package version used in the application.
• The video illustration of the issue reproducing scenario.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth