saveinmed/saveinmed-frontend/CORRECAO_MODAL_DETALHES_PRODUTO.md

Correção: Modal de Detalhes Abrindo Após Fechar Modal de Edição

Problema Identificado

Quando o usuário fechava o modal de "Editar Produto" na página de "Gestão de Catálogo de Produtos", o modal de "Detalhes do Produto" era aberto automaticamente, o que não era o comportamento desejado.

Causa Raiz

O problema estava na propagação de eventos no componente TableActions. Quando o usuário clicava no botão de editar (ícone de lápis), o evento de clique era propagado para a linha da tabela, que tinha um manipulador onClick que abria o modal de detalhes.

Sequência do Problema:

1. Usuário clica no botão "Editar" (ícone de lápis)
2. Modal de edição abre
3. Usuário faz as alterações e salva/cancela
4. Modal de edição fecha
5. O evento de clique original ainda estava sendo propagado para a linha da tabela
6. Modal de detalhes abre automaticamente

Solução Implementada

Arquivo Modificado: src/components/TableActions.tsx

Antes:

const TableActions: React.FC<TableActionsProps> = ({ onEdit, onDelete }) => {
  return (
    <div className="flex space-x-2">
      <button
        onClick={onEdit}
        className="text-gray-600 hover:text-blue-600 transition-colors"
        title="Editar"
      >
        <PencilIcon className="w-4 h-4" />
      </button>
      <button
        onClick={onDelete}
        className="text-gray-600 hover:text-red-600 transition-colors"
        title="Deletar"
      >
        <XMarkIcon className="w-4 h-4" />
      </button>
    </div>
  );
};

Depois:

const TableActions: React.FC<TableActionsProps> = ({ onEdit, onDelete }) => {
  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation(); // Impede a propagação para a linha da tabela
    onEdit();
  };

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation(); // Impede a propagação para a linha da tabela
    onDelete();
  };

  return (
    <div className="flex space-x-2">
      <button
        onClick={handleEdit}
        className="text-gray-600 hover:text-blue-600 transition-colors"
        title="Editar"
      >
        <PencilIcon className="w-4 h-4" />
      </button>
      <button
        onClick={handleDelete}
        className="text-gray-600 hover:text-red-600 transition-colors"
        title="Deletar"
      >
        <XMarkIcon className="w-4 h-4" />
      </button>
    </div>
  );
};

Principais Mudanças:

1. Criação de handlers específicos: handleEdit e handleDelete
2. Uso de e.stopPropagation(): Impede que o evento de clique seja propagado para elementos pais
3. Manutenção da funcionalidade: Os botões continuam funcionando normalmente, apenas sem propagar o evento

Resultado

✅ Antes da correção: Clicar em "Editar" → Modal de edição abre → Fechar modal → Modal de detalhes abre automaticamente

✅ Após a correção: Clicar em "Editar" → Modal de edição abre → Fechar modal → Nenhum modal adicional é aberto

Impacto

• Zero impacto na funcionalidade existente
• Melhora a UX ao eliminar comportamento indesejado
• Mantém todas as outras funcionalidades (editar, deletar, visualizar detalhes clicando na linha)

Teste

Para testar a correção:

1. Acesse /catalogo-produtos
2. Clique no ícone de lápis em qualquer produto
3. Faça alterações no modal de edição
4. Feche o modal (cancelar ou salvar)
5. Verifique que o modal de detalhes NÃO abre automaticamente

Data da Implementação

8 de setembro de 2025

Arquivos Afetados

• src/components/TableActions.tsx - Correção principal
• CORRECAO_MODAL_DETALHES_PRODUTO.md - Documentação da correção