code:-

const handleKeyDown = (event, ID) => {
  const active = document.activeElement;
        active.addEventListener('keydown', function (event) {

            switch (event.key) {
                case "ArrowUp":
                    active?.previousElementSibling?.focus();
                    break;
                case "ArrowDown":
                    active?.nextElementSibling?.focus();
                    event.preventDefault();
                    break;
                default: break;
            }
        })        
    }

  <tr key={playdata.idx} tabIndex={playdata.idx} className="border_bottom"
              onKeyDown={(e) => handleKeyDown(e, playdata.idx)}>
                                    <td style={{ color: "white", width: "200px" }}>
                                        <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
                                    </td>

When I click the row it shows me the focus and I can do the navigation with up and down but when I click the outside the row focus is gone. I want when the user clicks outside the row/table it stays focused where the focuses left How to solve that?

CodePudding user response：

You already have activeElement, we just reuse it for document.click which is to listen to all areas' clicks and filter them out with your expected areas (in your case, the expected elements are .border_bottom)

let active = document.activeElement; //this variable should be global to state your previous active element

document.addEventListener("click", function(event){
  event.preventDefault();
  
//if the current clicked element has your expected class, we should assign a new active element
  if(event.target.classList.contains("border_bottom")){ //you can add another class for the check instead of `border_bottom`
     active = event.target; //set a new active element
  }
  //focus only on active elements
  active?.focus();
});