Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

140
Vistas
Lags in caret display (caret does not reset on position change)

I'm using Prismjs in my React app and everything's working fine. I just have a caret display lag whenever I move it using my keyboard arrows. In standard inputs/textareas, it looks like the caret sort of "resets" its cycle when moved. But here, it just keeps on blinking at the same pace. So if you press left arrow four times in a row, you'll have to wait until the caret appears again to see your current position (which lasts something like 0.5 second). Which is kind of disturbing. Here's my code if it helps :

import { useState, useEffect } from "react";
import Prism from "prismjs";

export default function EditCode() {
  const [content, setContent] = useState("");

  const handleKeyDown = (e) => {
    let value = content,
      selStartPos = e.currentTarget.selectionStart;

    if (e.key === "Tab") {
      value =
        value.substring(0, selStartPos) +
        " " +
        value.substring(selStartPos, value.length);
      e.currentTarget.selectionStart = selStartPos + 3;
      e.currentTarget.selectionEnd = selStartPos + 4;
      e.preventDefault();

      setContent(value);
    }
  };

  useEffect(() => {
    Prism.highlightAll();
  }, []);

  useEffect(() => {
    Prism.highlightAll();
  }, [content]);
  return (
    <section className="codeGlobalContainer">
      <textarea
        className="codeInput"
        spellCheck="false"
        wrap="off"
        cols="200"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        onKeyDown={(e) => handleKeyDown(e)}
      />
      <pre className="codeOutput">
        <code className={`language-javascript`}>{content}</code>
      </pre>
    </section>
  );
}

I get that there's no CSS property like caret-blinking-speed, but is there anything I could do ? Is the handleKeyDown() function the source of my problem ?

N.B. : if I select text in my textarea, using keyboard, everything's going smoothly. Likewise, if I move my cursor with my keyboard arrows and type text instantly, there's no problem neither. It's really just the display of the caret.

Edit : If I remove the pre bloc, the problem is solved and the caret returns to its basic "reset blinking cycle on move" status.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

After several tests, I've found out that it's the spellCheck="false" line in my textarea that creates my problem. So it's solved for now... But I don't know why.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda