feat: Add data-focused attribute to manage focus state (#160)

* feat: Add data-focused attribute to manage focus state

* feat: optional chainin added

Author: Braggiouy

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [2.2.3]
+## Fixed
+- Enhanced native DOM focus behavior by adding and removing the data-focused attribute during focus transitions.
+
 # [2.2.2]
 ## Added
 - New export for `SpatialNavigation` core service with types

src/SpatialNavigation.ts

@@ -1451,6 +1451,8 @@ class SpatialNavigationService {
         focusDetails
       );
 
+      oldComponent.node?.removeAttribute?.('data-focused');
+
       this.log('setCurrentFocusedKey', 'onBlur', oldComponent);
     }
 
@@ -1463,6 +1465,8 @@ class SpatialNavigationService {
         newComponent.node.focus(this.domNodeFocusOptions);
       }
 
+      newComponent.node?.setAttribute?.('data-focused', 'true');
+
       newComponent.onUpdateFocus(true);
       newComponent.onFocus(
         this.getNodeLayoutByFocusKey(this.focusKey),