Using spell check while renaming a file in file manager

[Omar]

Hello,

So, I was trying to rename a file in FileManager, and I showed a red line under the name because I typed it wrong.
When I tried to right click and use the spell check, It doesn't work.

Thanks,
Omar

[Indhumathy Loganathan]

Hi Omar, 

 

We checked your requirement in File Manager component. Currently, we don’t have any default spell check suggestion option for rename operation of File Manager component. However, we are validating the feasibility to achieve your requirement and we will update you further details on 7^th June, 2021. 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Indhumathy Loganathan]

Hi Omar, 

 

Sorry for the inconvenience. 

 

As mentioned earlier, we do not have default spell check option for rename operation of File Manager component. However you can enable the default spellcheck attribute of input to check the spelling errors and suggestions. This will show the default browser context menu with spell correction suggestions. Refer to the below document for more details. 

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck 

 

To open this default context menu inside the rename dialog, you need to hide our File Manager ContextMenu. You can disable our ContextMenu by setting the visible property as false. We have used the File Manager beforePopupOpen event to set the spellcheck attribute and remove the File Manager ContextMenu. Refer to the below code snippet. 

 

  beforePopupOpen(args) { 

    if (args.popupName === "Rename") { 

      var inputElement = args.popupModule.element.querySelector(".e-input"); 

      var filemanager = document.getElementById("file-manager"); 

      //Set the spellcheck attribute 

      inputElement.setAttribute("spellcheck", true); 

      //Remove the File Manager ContextMenu 

      EventHandler.remove(filemanager, "contextmenu", filemanager.ej2_instances[0].onContextMenu); 

    } 

  }, 

 

Please find the sample and output screenshots below. 

 

Sample: https://codesandbox.io/s/vue-filemanager-spellcheck1-gjpzp?file=/src/App.vue 

 

 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L