We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Textboxes get disabled in production mode

Hi,

I have a very simple angular project and all having been working well through development. I wanted to test production mode today and I find the textboxes in all forms are in disabled state. When I switch back to dev mode, the forms all work perfect.

I am pasting login screen snippet here...
<form #loginForm="ngForm" class="form-signin">
<ejs-textbox name="identity" autocomplete="username" placeholder="{{'identity' | translate}}"
floatLabelType="Auto" [(ngModel)]="login.i" (click)="onIdentity()">
</ejs-textbox>
<!-- Password -->
<ejs-textbox type="password" name="credential" autocomplete="current-password"
placeholder="{{'credential' | translate}}" floatLabelType="Auto" [(ngModel)]="login.c">
</ejs-textbox>
<button class="btn btn-primary btn-block btn-lg btn-signin" type="submit"
(click)="authenticate()">{{'login' | translate}}</button>
</form>

When in production mode, I inspect the html elements and heres what I find......
<ejs-textbox _ngcontent-dbwui-server-c6="" autocomplete="username" floatlabeltype="Auto" ng-reflect-autocomplete="username" ng-reflect-float-label-type="Auto" ng-reflect-placeholder="Identity" ng-reflect-name="identity" ng-reflect-model="" class="ng-untouched ng-pristine ng-valid e-control e-textbox e-lib">
    <div class="e-float-input e-control-wrapper e-no-float-label e-disabled">
        <input _ngcontent-dbwui-server-c6="" autocomplete="username" floatlabeltype="Auto" name="identity" ng-reflect-float-label-type="Auto" ng-reflect-placeholder="" ng-reflect-name="identity" ng-reflect-model="" class="ng-untouched ng-pristine ng-valid e-control e-textbox e-lib e-disabled" type="undefined" role="textbox" id="textbox_0" aria-labelledby="label_textbox_0" disabled="disabled" aria-disabled="true">
         <span class="e-float-line"></span>
        <label class="e-float-text e-label-bottom" id="label_textbox_0" for="textbox_0"></label>
    </div>
</ejs-textbox>

The behaviour is the same on Chrome as well as Safari. All my syncfusion components are @17.3.29. 

Please do let me know if you need any other info. Will really . appreciate pointing me to the right direction.

Thanks and best regards,
Sathya




3 Replies

SP Sureshkumar P Syncfusion Team December 11, 2019 09:55 AM UTC

Hi Sathyanarayanan, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement. we cannot able to reproduce your reported issue from our end. We have created a sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/149796/ze/production-1847341793  
 
If you still facing same issue, please forward below details to proceed further 
1.     Whether you have customized textbox inside the form element or not? 
2.     Please check the same behavior with native textbox component also. 
3.     Whether you have used any other CSS styles or not? 
4.     If you have used any other third-party CSS, then please share the details. 
5.     If you can reproduce your issue in the attached sample. Please share the sample with issue reproducing replication procedure. 
These details will help us to provide exact solution at earlier. 
 
Regards, 
Sureshkumar P 



SS Sathyanarayanan Srinivasan replied to Sureshkumar P December 19, 2019 07:42 AM UTC

Hi Sathyanarayanan, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement. we cannot able to reproduce your reported issue from our end. We have created a sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/149796/ze/production-1847341793  
 
If you still facing same issue, please forward below details to proceed further 
1.     Whether you have customized textbox inside the form element or not? 
2.     Please check the same behavior with native textbox component also. 
3.     Whether you have used any other CSS styles or not? 
4.     If you have used any other third-party CSS, then please share the details. 
5.     If you can reproduce your issue in the attached sample. Please share the sample with issue reproducing replication procedure. 
These details will help us to provide exact solution at earlier. 
 
Regards, 
Sureshkumar P 


Hi Sureshkumar,

Thanks for trying to help. I chcked out your production sample and it works with --prod mode. It took me a few days to reproduce the situation on your sample but somehow was not able to. At the same time, I was not able to understand why the textboxes get disabled in my project (at some point of time, i had fleshed out the production sample with exact settings and code). The only difference I could see was an additional architect goal called 'server' and I do not understand angular deep enough to know whether it is of any significance to this problem.

Finally, I started a new angular project and moved my code one angular feature at a time. Now the problem is gone. Nevertheless, I am answering your questions below, if it helps finding the cause.
1.     Whether you have customized textbox inside the form element or not? 
No. The phenomenon was observed on all textboxes across the project.

2.     Please check the same behavior with native textbox component also. 
When replacing ejs-textbox with input type="text", they do not get disabled. I could specifically see the Syncfusion css class "e-disabled" only on the ejs-textbox instances.

3.     Whether you have used any other CSS styles or not? 
Yes. standard bootstrap css only. version 4.3.1 added through npm install. But no other css classes were added to ejs-textbox, as already shown in my code snippet.

4.     If you have used any other third-party CSS, then please share the details. 
No. 3rd party css, except the CSS imports described in Syncfusion angular documentation site.

5.     If you can reproduce your issue in the attached sample. Please share the sample with issue reproducing replication procedure. 
I couldnt reproduce the error in the sample shared. the issue was fixed when new angular project was created (of course, the CLI version is latest @8.3.20 while the earlier project was @8.3.17)

Thanks and best regards,
Sathya


SP Sureshkumar P Syncfusion Team December 20, 2019 11:37 AM UTC

Hi Sathyanarayanan, 
 
Thanks for your update. Please get back to us if you need further assistance on this. 
 
Also, we have checked your scenario with angular cli version 8.3.17 version and we cannot able to reproduce the issue. Please find the sample here: https://www.syncfusion.com/downloads/support/forum/149796/ze/textbox1473106412  
 
Please share the below details to proceed further on that specific version related issue 
  1. Share your node and npm version details.
  2. If possible please share your issue reproduced sample angular.json and package.json files.
These details will help us to provide exact solution at earliest. 
 
Regards, 
Sureshkumar P 


Loader.
Live Chat Icon For mobile
Up arrow icon