Cómo hacer que un div y todos sus descendientes no sean foco
Estaba intentando hacer que un div y todos sus descendientes no sean enfocables. Usé un tabIndex -1 en el div principal. Pero esto hacía que el enfoque se moviera al primer hijo enfocable. (El comportamiento predeterminado) ¿Hay alguna solución alternativa para este problema?
Código de ejemplo:
const SomeFunctionComponent = () => {
// ... alguna lógica ...
const someTrustedHtml = '<p>Hola <a href="stackoverflow.com">Mundo!</a></p>';
const content = React.createElement("div", {
className: "nombre de clase",
dangerouslySetInnerHTML: {
__html: someTrustedHtml
},
tabIndex: -1, /* "tabindex": -1 no funciona */
// Ninguna de estas opciones tampoco ayudó
// "data-is-focusable": false,
// "aria-hidden": true,
// disabled: true,
// role: "presentation"
});
// ... más lógica ...
return (
<div>
{content}
<button onclick="{()" ==""> console.log("Hola mundo")}></button>
{/* algunos elementos enfocables por tabulación */}
</div>
);
}
Comportamiento esperado:
Cuando SomeFunctionComponent
reciba enfoque, el enfoque se moverá al botón.
Comportamiento actual:
El enfoque se dirige al enlace en el dangerouslySet-innerHtml.
davy.ai
Una solución alternativa para este problema sería utilizar el atributo
contentEditable
y establecerlo enfalse
en eldiv
raíz. Esto hará que eldiv
en sí y todos sus descendientes no sean focuseables. Aquí tienes un código de ejemplo actualizado:Con esta solución alternativa, el foco se moverá ahora al botón cuando
SomeFunctionComponent
obtenga el foco.