[IMPL] useActiveElement hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useActiveElement/UseActiveElement.tsx

@@ -1,17 +1,16 @@
 import { useActiveElement } from "../../../../../../packages/react-tools/src"
 
 /**
-DEMO
+The component has 3 HTML elements: a _span_ element with __tabindex__ attribute, a _p_ element with __tabindex__ attribute and a _button_ element. It renders also the current _active element_. If element focused changes, _active element_ displayed will change.
  */
 export const UseActiveElement = () => {
 	const activeElement = useActiveElement();
-	console.log("render", activeElement?.tagName)
 
 	return (<>
 		<p>Active element is: {activeElement?.tagName}</p>
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
-			<span tabIndex={0}>Span</span>
-			<p tabIndex={0}>P</p>
+			<span tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 'auto'}}>Span</span>
+			<p tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 0}}>P</p>
 			<button>Button</button>
 		</div>
 	</>)

apps/react-tools-demo/src/markdown/useActiveElement.md

@@ -10,15 +10,15 @@ export const UseActiveElement = () => {
 	return (<>
 		<p>Active element is: {activeElement?.tagName}</p>
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
-			<span tabIndex={0}>Span</span>
-			<p tabIndex={0}>P</p>
+			<span tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 'auto'}}>Span</span>
+			<p tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 0}}>P</p>
 			<button>Button</button>
 		</div>
 	</>)
 }
 ```
 
-> DEMO
+> The component has 3 HTML elements: a _span_ element with __tabindex__ attribute, a _p_ element with __tabindex__ attribute and a _button_ element. It renders also the current active element. If element focused changes, active element displayed will change.
 
 
 ## API

packages/react-tools/README.md

@@ -60,7 +60,7 @@
 	- [x] useScript
 	- [x] useDebounce
 	- [x] useThrottle
-	- [-] useActiveElement
+	- [x] useActiveElement
 	- [ ] useTimeout
 	- [ ] useInterval
 	- [ ] useTextSelection

packages/react-tools/src/hooks/useActiveElement.ts

@@ -11,13 +11,34 @@ export const useActiveElement = ():Element|null => {
 	return useSyncExternalStore(
 		useCallback(notif => {
 			previousElem.current = document.activeElement;
-			const listener = () => notif();
+			const idTimeout:{id: number | NodeJS.Timeout} = { id: 0 };
+			const listener = (e: Event) => {
+				/**
+				 * INFO
+				 * When switching from one active element, other than the body,
+				 * to another, there is a first rerender due to the focusout event
+				 * which returns the body as the active element. To overcome this,
+				 * the execution of the notify callback during the focusout event
+				 * is delayed by one iteration: if the focusout event is followed
+				 * by a focusin event, this will cancel the previous execution
+				 * of the notify callback and will only rerender the new active
+				 * element.
+				 */
+				if (e.type === "focusout") {
+					idTimeout.id = setTimeout(() => {
+						notif()
+					}, 0);
+				} else {
+					clearTimeout(idTimeout.id);
+					notif();
+				}
+			}
 			addEventListener("focusin", listener, true);
 			addEventListener("focusout", listener, true);
 
 			return () => {
-				addEventListener("focusin", listener, true);
-				addEventListener("focusout", listener, true);
+				removeEventListener("focusin", listener, true);
+				removeEventListener("focusout", listener, true);
 				previousElem.current = null;
 			}
 		}, []),