DevOps, CI/CD and Automation

I am trying to get the editable table to work with vdom hooks. I have posted the sample code below. When the edit state is updated by the action button. The table redraws and loses focus which causes the table to revert back to navigation mode. How can I get the table to stay in edit mode. I tried intercepting the close event with onBeforeRowEditEnd but this is not called after updating the state

import ArrayDataProvider = require("ojs/ojarraydataprovider");
import "ojs/ojtable"
import "ojs/ojinputtext"
import {useEffect, useState} from "preact/hooks";

export function Content() {
    let [editRow, setEditRow] = useState({rowKey: "1"})
    useEffect(() => console.log("hi" + editRow.rowKey))
    const data = new ArrayDataProvider([
        {id: "1", name: "jim"}, {id: "2", name: "bob"}
    ], {keyAttributes: "id"})
    return (
        <div class="oj-web-applayout-max-width oj-web-applayout-content">
            <div>hi</div>
            <oj-table
                id="table"
                aria-label="Departments Table"
                data={data}
                editMode="rowEdit"
                editRow={editRow}
                layout="fixed"
                columnsDefault={{sortable: "disabled"}}
                columns={[{
                    headerText: "Department Id",
                    field: "id",
                    id: "id"
                },
                    {
                        headerText: "Department Name",
                        field: "name",
                        id: "name",
                        template: "nameTemplate"
                    },
                    {
                        headerText: "Action",
                        width: "6.2rem",
                        headerStyle: "text-align: center;",
                        style: "padding-top: 0px; padding-bottom: 0px; text-align: center;",
                        template: "actionTemplate",
                        id: "action"
                    }
                ]}
                class="demo-table-container"
            >
                <template slot="nameTemplate" data-oj-as="cell" render={(cell) => {
                    console.log(cell.mode)
                    if (cell.mode === 'navigation') {
                        return (
                            <div>hi {cell.item.data.name}</div>
                        )
                    } else if (cell.mode === 'edit') {
                        return <oj-input-text labelHint="edit me" class="editable" id="edit"></oj-input-text>
                    }
                    return <div></div>
                }
                }></template>
                <template slot="actionTemplate" data-oj-as="cell" render={(cell) => {
                    return (
                        <oj-button
                            data-oj-clickthrough="disabled"
                            display="icons"
                            chroming="borderless"
                            onojAction={(event) => {
                                setEditRow({rowKey: cell.key})
                            }
                            }>
                            <span slot="startIcon" className="oj-ux-ico-edit"></span>
                            Edit
                        </oj-button>
                    )
                }
                }/>
            </oj-table>
        </div>
    );
}