PrimeReact InputNumber вызывает сообщение «Не удалось выполнить «removeChild»» только в macOS (Safari/Chrome) при перекл ⇐ Javascript

[Anonymous]

У меня есть компонент React + PrimeReact, который отображает статический текст, и когда пользователь нажимает кнопку редактирования, он переключается на редактируемые входные данные (InputText, InputTextarea, InputNumber и т. д.).
Весь компонент:
import React, { useState, useRef } from "react";
import { Card } from "primereact/card";
import { InputText } from "primereact/inputtext";
import { InputNumber } from "primereact/inputnumber";
import { Button } from "primereact/button";
import { Toast } from "primereact/toast";
import type { Evento } from "../../services/EventoService";
import { atualizarEventoDetalhesGerais } from "../../services/EventoService";
import { formatarMoeda, somarVerbasEvento } from "../../utils/FomatarUtils";
import "../../styles/components/eventos/DetalhesGerais.css";
import { InputTextarea } from "primereact/inputtextarea";

const DetalhesGeraisComponent: React.FC = ({ evento }) => {
const [editando, setEditando] = useState(false);
const [dados, setDados] = useState({
nome: evento.nome,
observacoes: evento.observacoes ?? "",
codigoBv: evento.codigoBv ?? 0,
verbaBv: evento.verbaBv ?? 0,
verbaLojas: evento.verbaLojas ?? 0,
});
const toast = useRef(null);

// const handleChange = (campo: keyof typeof dados, valor: string) => {
// setDados((prev) => ({ ...prev, [campo]: valor }));
// };

const handleChange = (
campo: keyof typeof dados,
valor: string | number | null | undefined
) => {
setDados((prev) => ({
...prev,
[campo]: valor ?? (typeof prev[campo] === "number" ? 0 : "")
}));
};

const handleSalvar = async () => {
try {
// Atualiza no backend
const dto = {
nome: dados.nome,
observacoes: dados.observacoes,
codigoBv: dados.codigoBv ? Number(dados.codigoBv) : undefined,
verbaBv: dados.verbaBv ?? undefined,
verbaLojas: dados.verbaLojas ?? undefined,
};

await atualizarEventoDetalhesGerais(evento.id, dto);

toast.current?.show({
severity: "success",
summary: "Evento atualizado",
detail: "As informações foram salvas com sucesso.",
life: 2500,
});

setEditando(false);
} catch (err) {
console.error("Erro ao atualizar evento:", err);
toast.current?.show({
severity: "error",
summary: "Erro ao salvar",
detail: "Não foi possível salvar as alterações.",
life: 2500,
});
}
};

return (
{
if (e.key == "Escape" && editando) setEditando(false);
}}
>


{/* Botão de edição/salvar */}

{editando ? (


"esc" para sair

) : (
setEditando(true)}
title="Editar informações"
/>
)}

Nome:{" "}
{editando ? (
handleChange("nome", e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSalvar();
if (e.key === "Escape") setEditando(false);
}}
style={{ width: "60%" }}
/>
) : (
dados.nome || "—"
)}

Observações:{" "}
{editando ? (
handleChange("observacoes", e.target.value)}
onKeyDown={(e) => {
if (e.key === "Escape") setEditando(false);
}}
style={{
width: "100%",
minHeight: "150px",
fontFamily: "inherit",
whiteSpace: "pre-wrap",
}}
/>
) : (
style={{
whiteSpace: "pre-wrap",
lineHeight: "1.6",
marginTop: "0.5rem",
padding: "0.5rem 0",
}}
>
{dados.observacoes || "—"}

)}

Código BV:{" "}
{editando ? (
handleChange("codigoBv", e.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSalvar();
if (e.key === "Escape") setEditando(false);
}}
mode="decimal"
min={0}
maxFractionDigits={0}
useGrouping={false}
style={{ width: "30%" }}
/>
) : dados.codigoBv && Number(dados.codigoBv) > 0 ? (
dados.codigoBv
) : (
Sem Código BV
)}

{/* Verba BV */}

Verba BV:{" "}
{editando ? (
handleChange("verbaBv", e.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSalvar();
if (e.key === "Escape") setEditando(false);
}}
mode="currency"
currency="BRL"
locale="pt-BR"
minFractionDigits={2}
style={{ width: "30%" }}
/>
) : (
formatarMoeda(dados.verbaBv)
)}

{/* Verba Lojas */}

Verba Lojas:{" "}
{editando ? (
handleChange("verbaLojas", e.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSalvar();
if (e.key === "Escape") setEditando(false);
}}
mode="currency"
currency="BRL"
locale="pt-BR"
minFractionDigits={2}
style={{ width: "30%" }}
/>
) : (
formatarMoeda(dados.verbaLojas)
)}

Total verba BV + Verba Lojas: {formatarMoeda(somarVerbasEvento(evento))}


);
};

export default DetalhesGeraisComponent;

Этот компонент используется внутри другого компонента:
const DetalhesGerais: React.FC = ({ evento }) => {
return ;
};

В Windows все работает отлично, но в macOS (и Chrome, и Safari) нажатие кнопки редактирования вызывает фатальную ошибку:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node':
The node to be removed is not a child of this node.
at Px (index-DbgbQxj1.js:48:91035)
at _o (...)
at Ix (...)


После этого все приложение гаснет.
Это происходит только на MacOs.
Минимальный код:
Я установил переменную editando (редактирование), чтобы приложение могло отображать другой тег, а пользователь мог редактировать данные о codeBv, наблюдениях и т. д.
const [editando, setEditando] = useState(false);

return (

{editando ? (
handleChange("codigoBv", e.value)}
/>
) : (
{dados.codigoBv}
)}

setEditando(true)}
/>

);


Подробнее здесь: https://stackoverflow.com/questions/798 ... on-macos-s