Can't select a part of a text with mouse within an editcell in the treegrid

[Developer]

Hi, i have a big project in which i used syncfusion version 16.4.0.52. Now i switched to 17.3.0.9 and i had problems with the selection of a text within an editcell in the treegrid.

I am using ejNumericTextbox and a ejMaskEdit, and in both i can't select a part of the text with the mouse when i am in edit mode of the cell.

If i switch back to the older version it is working as expected.

It looks like that the ejCombobox is not working with the old and the new version(it only works with the keyboard, but not with the mouse).

I have tried to create a small example based on your demo....

https://js.syncfusion.com/demos/web/?_ga=2.205757395.1357982584.1572527445-650074226.1538471062#!/bootstrap/treegrid/editing/edittemplate

... and i found out that is was working there. I used the "Task Name" column.

Then i clicked on the "Edit" button to modify your example a little bit in the jsPlayground, and i found out, that in the playground the selection was not working(without changing anything on the code).

https://jsplayground.syncfusion.com/Sync_4q0ptuwh

Then i found out that in the playground sample the selection via mouse doesn't work in chrome, but it works in the internet explorer.

And  last but not least in chrome it looks like that the selection with mouse does work if the text is longer then the cell.

Can you reproduce this problems with the different browsers?

Are there any known problems with the newer version in this environment?

Regards

Michael

[Pooja Priya Krishna Moorthy]

Hi Michael, 

 

Greetings from Syncfusion support. 

Thank you for detailed information. 

We have checked reported scenarios in the shared jsPlayground sample in our local machine. But we are unable to reproduce the issue. We have checked the sample in Chrome browser with version 77.0.3865.120. 

Please share us the below mentioned details. 

1. Chrome browser version.
2. Machine’s operating system
3. Video sample to replicate this issue.

It will be very helpful if you share the details with us, to check this issue in our end. 

 

Thanks, 

Pooja Priya K. 

 

[Developer]

Hi, i am using the following versions:

Google Chrome, newest version => Version 78.0.3904.87 (Offizieller Build) (64-Bit)

Internet Explorer Version 11.805.17763.0 (Update version: 11.0.155)

Windows 10.0.17763 Build 17763

In jsPlayground it is  also working if i change the output from Web to Android.

I have added a video with the described behavior.

Starting with chrome browser and the demo, then switching to jsPlayground, switching to internet explorer and back to chrome.

I see that we are here in the javascript EJ 2 part of the forum, but i think the problem is in the older javascript version (is it called EJ1). With the link of the first post it should be clear in which version the problem is.

Regards

Michael

Attachment: 20191107_074922_43aca46c.7z

[Pooja Priya Krishna Moorthy]

Hi Michael, 

Thanks for your detailed information. 

We are able to reproduce the reported issue when isResponsive property is enabled by default this property was true. We are preventing the default events internally when this property is enabled on various actions. 

So we logged a bug report for this, you can track its status from below feedback link.  

Feedback – https://www.syncfusion.com/feedback/10057/issue-with-text-selection-in-edited-cell 

We will fix this issue and include the fix in our upcoming Volume 4, 2019 main release which is expected to be rolled out on December 16, 2019. 

To prevent this issue this in your application now , please set isResponsive property as false. 

If you need solution earlier in source level, we can provide it as patch file. 

Until then we appreciate your patience. 

Thanks, 

Pooja Priya K. 

 

[Developer]

Hi, thanks for the information,

but in my environment it makes no difference if i use isResponsive "true" or "false". It is the same not working behavior in the masked edit cell in the tree grid.

The only thing that work for my is if  i switch back to the older syncfusion version. Then it is working as expected, and it also makes no difference there if i use isResponsive "true" or "false".

It would be fine if i can have the earlier solution on source level. Maybe this one would work in my environment.

Regards

Michael

[Pooja Priya Krishna Moorthy]

Hi Michael, 

 

We have checked in many cases and tested in mentioned chrome version and source version. We are able to reproduce the issue only when isResponsive property is enabled. 

Please cross-check whether these properties were used twice in your application code’s top and bottom location. 

Else we will arrange a web meeting to discuss about this issue, because without reproducing it we can’t fix it from our side. So that it will be helpful to fix this in source level. 

 

Thanks, 

Pooja Priya K. 

[Developer]

Hi, i found out some more information. The difference between the working version (16.4) and the not working version (17.3) was the generation of the ej.theme.css with the Essential JS 1 Custom Script Generator. The working version was created with the "Minified" setting, and the not working version with "Non-Minified".

So i have created a small example(test.html). This example is working with the minified ej.theme.min.css from your homepage which is referenced in the following file. ( <link rel='nofollow' href="//cdn.syncfusion.com/17.3.0.14/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />). => Text can be selected in the cell of the column "value" as expected.

With the Custom Script Generator i have generated one minified (ej.theme.css) and one non-minifed (ej.theme.max.css) css file.

If i use the minified css file instead of the file from your homepage, it is also working. But if i use the non-minified version i can not select the text via mouse in the edit cell of the column "value". I have also the same behavior with other versions.

What i also found out was, that the selected text can be copied correctly, only the selection is not show, so i was looking about some CSS/styling problemes(user-select: text).

And the problem only occurs if i use an editTemplate for the column. 

I am currently using the minified version, but i think the non-minified version should also work correct. I hope the informations help you to find the problem.

Regards

Michael

Attachment: NonMinifiedProblem_6df0c28e.7z

[Pooja Priya Krishna Moorthy]

Hi Michael, 

Thanks for sharing the detailed information. 

We are also able to reproduce the issue in our end. We will check and update you the details in one business day(December 12, 2019). 

 

Regards, 

Pooja K. 

[Pooja Priya Krishna Moorthy]

Hi Michael, 

We have analyzed the reported issue with information shared by you. We can replicate the issue in our side also. We have checked the all the styles and CSS classes referred to that input box and containers but there is no CSS properties override the background highlight. In un-minified file we found that some empty styles are set for the ::selection pseudo element. We suspect that, this might be the reason. 

We can resolve this issue in work-around by setting the background color for this ::selection element. Please find the below code example. 

<style> 

  ::selection { 

      background: #179BD7; 

  }     

</style> 

Sample - https://jsplayground.syncfusion.com/u1xqpt0j 

Thanks, 

Pooja Priya K.