es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que un div y todos sus descendientes no sean foco

26 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución alternativa para este problema sería utilizar el atributo contentEditable y establecerlo en false en el div raíz. Esto hará que el div en sí y todos sus descendientes no sean focuseables. Aquí tienes un código de ejemplo actualizado:

    const SomeFunctionComponent = () => {
  // ... alguna lógica ...

  const someTrustedHtml = `<p>Hola <a href="stackoverflow.com">Mundo!</a></p>`;
  const content = React.createElement("div", {
    className: "un nombre de clase",
    contentEditable: false,
    dangerouslySetInnerHTML: {
      __html: someTrustedHtml,
    },
  });

  // ... más lógica ...

  return (
    <div>
      {content}
      <button onclick="{()" ==""> console.log("hola mundo")}></button>
      {/* algunos elementos en los que se puede hacer foco con la tecla tab */}
    </div>
  );
}

    Con esta solución alternativa, el foco se moverá ahora al botón cuando SomeFunctionComponent obtenga el foco.

Comments are closed.