I have a list of offers, each of the offer can be deleted when clicked on a popover. If the user click on the delete option in the popover, a modal opens on top of everything, to have the user confirm deleting, but there is no visual feedback on which offer (out of many) is being deleted.
I want the parent to have a border when user clicks in the delete in the modal. I have tried with focus within, but it didn't work when modal was open, perhaps because modal is actually a React Portal.
Any ideas how to achieve what I want?
if you map these components then add one state in the parent class and check if the current id and you click that button id same then add focus class style otherwise as normal
<div tabIndex="0" className={`relative Parent ${item.id == currentOpenId ? "focusStyle" : null}`}>
<div className="sofOverview">
<Component /> // returns the code below
</div>expected.
Why don't you do one thing, when you click the delete option in the popover to open up a new modal for confirmation, add a border or any visual indicator that you want to your parent div that holds that popover. Because by the time of clicking the delete option in the popover you know for what offer you've opened the popover. Why exactly you want to add the indicator to your parent when the confirmation modal is opened and the delete button within modal is clicked, because anyways after the delete button is clicked your offer will be deleted. So, adding the indicator at popover level is fine.