Hello, Sanja,
I was able to locate why both issues occur:
1) Blur not fired - This is because the blur is fired after an element has lost focus. We have a logic to automatically focus an input in the demo, but as the Upload is a custom cell, we have to add logic to focus it as well in order to fire the onBlur and close the cell for edit:
const myTD = React.createRef()
React.useEffect(()=> {
if(myTD.current !== null && myTD.current.querySelector('.k-button') !== null ){
myTD.current.querySelector('.k-button').focus()
}
},[props.dataItem.inEdit])
return (
<td onClick={(e) => props.enterEdit(props.dataItem, props.field)} ref={myTD}>2) The onAdd not fired - This occurs as this time we have clicked the button, focused it, but after the file dialog is shown, this calls the onBlur, closes the cell, removes the Upload and there is not Upload component left on the page to fire the onAdd. We can prevent the close if the button is blurred, but this will also prevent the cell from closing on blur in general.
In this case, we can recommend using the in-line editing or removing the onBlur logic for exit editing, as opening a file explorer causes blur and we have no control over that.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.