I have a lightning-datatable component within a custom lwc component (lets call it
child), and that component sits within another component we'll call
There is a Next button in the parent component which I need to disable if the user edits a value in the table within the child component.
oncellchange we can detect when the user makes a change to a value using inline-editing, and currently this is firing an event from the child to the parent to let the parent know the table is in 'edit mode'. However a major limitation of this is that it only seems to fire when the user clicks away from the inline-edit input field (blur). This causes a problem for me because if the user edits a value in the table and then immediately clicks the Next button without first clicking anything else, the onclick action of the Next button fires before the oncellchange event has fired in the table and I can't stop the user navigating to the next page before they may have saved or cancelled their changes, or dealt with any errors the save might throw up.
Can anybody think of a good way to solve this? In theory you could detect when the edit components are visible within the table but in reality this isn't possible because the inner workings of standard components are encapsulated so querySelector returns nothing if you try to retrieve their unique classes. I have tried manually triggering a click event on some other component when the user clicks the Next button - in order to try and get the oncellchange event to fire in the table - but it didn't work.
Thanks in advance for any help!