Issue with editing cell

Tags: #<Tag:0x00007f1360355fa0> #<Tag:0x00007f1360355e38>
#1

Hi there,
We are using handsontable in our project.
We have made the cells of table as editable.
We are having the confguration form, on filling which the table would be plotted.
Now I am selecting a cell (editable), I am having a cell-level configuration form opened.
When I try to select and type in any of the forms input field may it be text or number, the characters get typed in the cell selected, whereas the characters should be typed onto the selected form field.
Also I cannot unselect the cell If I am clicking outside the handsontable. This is as per my requirement.
All the forms are outside handsontable.
can you please help me with solving the issue.

#2

Hi @rupeshfend

I will need a code example to check what might be the cause of this issue. Also, can you please send me your license ID at support@handsontable.com, as I need to check your current support plan.

#3

Ok, I will share you a license ID, Apart this issue is raised because,
Cell is selected and at same time we select input field and tries to type characters in input field without ensuring blinking of the cursor inside the input field in that case typed characters get entered in a cell. https://drive.google.com/file/d/14qqqGEjnvV1YJxelqFzij0aboUV2rYDE/view?usp=drive_link

#4

Hi there, I looked into it, but I’m encountering it intermittently, so I can’t create a code example. and in order to ensure seamless user engagement, I need to resolve this. Could you please let me know how I can do that?

#5

Hi @rupeshfend

I understand, but without example where the issue is replicable I can’t do much. The other solution would be to schedule a call and check the code then, but that will require a higher support plan.

#6

Hi there,
Please check the code example and recording where you can check the above issue, https://drive.google.com/drive/folders/1LFELgGFwxxEpa5ToXTUykhpnCG5dmLri?usp=sharing, hope after this you will be able to give me a possible solution as per my requirement.

In video see the place where I am clicking the input field. First just at its border where the cursor is normal, whereas second time deep inside where on hover the cursor changes to pointer.
I have used material 14.0.4 and handsontable 14.0.0.
Please download the folder, npm install it and serve and check the issue.
Additionally, I will share the license key with you whenever management gives me permission to do so…

#7

Hi @rupeshfend

Thank you for the example and the video, that was helpful. I checked the code and your implementation, and it looks like the issue is caused by Angular Material component, and not Handsontable.

looking at API of the field element in their documentation, it seems that it has its own focus switching mechanism witch interferes with the input element focus while clicking outside the input, and force it to return to the cell.

I tested it with several other scenarios, and each case the focus was correctly attatched to the outside input element, so it’s safe to assume the it’s fault of this field Material element.

1 Like