I am creating a pricing table using a custom plugin inside a subeditor instance. The table has editable columns for Name, Price, and Quantity, and the subtotal column value is dyanamically calculated based on the values of the Price and Quantity columns. Also, the table has tax and discount columns, which are calculated accordingly. There are buttons to add and delete rows as well.
While the plugin works fine in Firefox, I am experiencing issues with inputting data in other browsers. I am only able to input one character at a time. After entering a character, the focus is lost, the cursor disappears and I need to click on the cell again to get the cursor.
I have created a CodeSandbox to replicate the issue. Link.
Can someone please help me identify the issue and provide a solution to this problem? Thank you.
I tried removing the input elements inside the data cells, and use the data cells with contenteditable directly to take input from user. But this didn't work as input/keyup/keydown event won't get triggered if text is entered inside data cell.
I also tried to manually focus the selected input element inside the input event listener, tried focusing the input element with some delay using setTimeout as well.