1. Home
  2. Forum
  3. React - EJ 2
  4. Document Editor default focus out

Document Editor default focus out

Hi Team,

I am using document editor in my react application and when I open document editor then by default focus in place for web and mobile view.

In web, default focus not an issue. But, In mobile view, due to default focus automatically keyboard appearing. 

I don't want default focus when I open the document editor. 

How to restrict focus here? Please suggest





9 Replies 1 reply marked as answer
KB Kurthis Banu Abdul Majeeth Syncfusion Team February 4, 2021 05:36 PM UTC

Hi Arul, 

## default focus issue: 

Please find the code details from below code snippet 

Code Snippet: 

Public isMobileDevice : boolean = /Android|Windows Phone|webOS/i.test(navigator.userAgent); 
 
 
this.container.documentChange = () => { 
  if (isMobileDevice) { 
   setTimeout(() => { 
                    this.container.documentEditor.fitPage("FitPageWidth"); 
                this.titleBar.updateDocumentTitle(); 
                this.container.documentEditor.focusIn(); 
                }, 50); 
 } 
 else { 
                this.titleBar.updateDocumentTitle(); 
                this.container.documentEditor.focusIn(); 
 
 } 
} 
 
 
 
 





 
Currently document editor doesn’t provide mobile responsive support, it will be implemented in any of our upcoming releases.   
   
Feature status can be tracked from below link.   
   
    
we will update the feedback status once it is taken for implementation.   


Regards, 

Kurthis Banu A. 


KB Kurthis Banu Abdul Majeeth Syncfusion Team February 5, 2021 09:08 AM UTC

Hi Arul,  

Please ignore the last update. 


Currently document editor doesn’t provide mobile responsive support, it will be implemented in any of our upcoming releases.    

Feature status can be tracked from below link.    
    
     
we will update the feedback status once it is taken for implementation.    


you can resolve this issue from below code snippet in document editor is in read only mode. 

Code snippet: 


Public isMobileDevice : boolean = /Android|Windows Phone|webOS/i.test(navigator.userAgent);  
  
  
this.container.documentChange = () => {  
  if (isMobileDevice {  
this.container.documentEditor.isReadOnly = true; 
   setTimeout(() => {  
                    this.container.documentEditor.fitPage("FitPageWidth");  
                }, 50);  
 }  
 else {  
            this.container.documentEditor.isReadOnly = false; 
            this.titleBar.updateDocumentTitle();  
                this.container.documentEditor.focusIn();  
  
 }  
}  
 



Regards, 

Kurthis Banu A. 


Marked as answer
AB AB November 5, 2021 07:42 AM UTC

Hello,

Is it possible to hide the keyboard permanently in mobile / readonly mode?

Regards


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 8, 2021 08:24 AM UTC

Hi AB,  

As we mention earlier, At present, Syncfusion Web Document editor component is not responsive for mobile browsers and we haven’t ensured the editing functionalities in mobile browsers. Hence, we recommend switching the Document editor component to read only mode in mobile browsers and restrict editing functionalities completely. So, the Document editor component behaves properly as a document viewer in mobile browser. 

Please find the example application for automatically switching the Document editor component to read only mode in mobile browsers from below. 


You can track the status of feature from the below link:            

We will update the status of the feedback link once it is taken for implementation. We will update you once feature implemented. We appreciate your patience.   

For more information about mobile responsive, please check with below Documentation Link: 

Regards,   
Kurthis Banu A.   


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 8, 2021 08:24 AM UTC

Hi AB,  

As we mention earlier, At present, Syncfusion Web Document editor component is not responsive for mobile browsers and we haven’t ensured the editing functionalities in mobile browsers. Hence, we recommend switching the Document editor component to read only mode in mobile browsers and restrict editing functionalities completely. So, the Document editor component behaves properly as a document viewer in mobile browser. 

Please find the example application for automatically switching the Document editor component to read only mode in mobile browsers from below. 


You can track the status of feature from the below link:            

We will update the status of the feedback link once it is taken for implementation. We will update you once feature implemented. We appreciate your patience.   

For more information about mobile responsive, please check with below Documentation Link: 

Regards,   
Kurthis Banu A.   


AB AB November 24, 2021 11:25 AM UTC

Hello,

There is no problem with the read only mode. But when we touch the screen the soft keyboard is appearing. Is there a way to hide the keyboard completely?

Regards


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 25, 2021 05:14 AM UTC

Hi AB, 

As we mentioned earlier, Currently, Document Editor doesn’t provide to hide the screen the soft keyboard. So, we will add your concern once we will start the implementation this feature. 

You can track the status of feature from the below link:             

We will update the status of the feedback link once it is taken for implementation. We will update you once feature implemented. We appreciate your patience.    

Regards, 
Kurthis Banu A. 


AB AB November 25, 2021 05:34 AM UTC

Hello,


Sorry I didn't understand from your previous post. Thank you.


Regards


KB Kurthis Banu Abdul Majeeth Syncfusion Team November 26, 2021 07:05 AM UTC

Hi AB,  

Sorry for the inconvenience caused. 

As we mentioned earlier, Currently, Document Editor doesn’t provide complete mobile responsive support. Also, we didn’t ensure the mobile functionality. So, it is not possible to hide the keyboard on click or focus. 

It will be implemented in any of our upcoming releases. Once we have start implement this feature, we will ensure to hide the keyboard completely. 

You can track the status of feature from the below link:              

We will update the status of the feedback link once it is taken for implementation. We will update you once feature implemented. We appreciate your patience. 

Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon