po-angular
po-angular copied to clipboard
po-ui
po-modal: Multiplos modais fechando ao clicar fora com o parametro p-click-out="true"
Reprodução
Pessoal encontrei um bug quando usamos dois modais um dentro do outro com a opção de fechar ao clicar fora do modal (p-click-out="true")
Link do StackBlitz com o exemplo: https://stackblitz.com/edit/angular-ivy-qwuvz8?file=src%2Fapp%2Fapp.component.html
Passos para reproduzir:
- Colocar dois modais em um componente, um dentro do outro.
- Clicar para abrir o primeiro modal e depois clicar no botão para abrir o segundo modal.
- Ao clicar fora do modal esta fechando os dois.
Qual o comportamento atual?
Quando temos dois modais abertos com a opção p-click-out="true" eles estão fechando os dois ao clicar fora
Que comportamento você esperava ver?
Ao clicar fora deveria só fechar um dos modais que seria o último, esse mesmo comportamento acontece se apertarmos no botão de fechar do segundo modal.
Ambiente
- PO UI: 14.3.1
- Angular: 14.0.7
- Browser(s): Todos
- Operating System: Todos
Olá @brunochikuji!
Obrigada por reportar, estamos analisando seu cenário e logo iremos lhe dar um retorno.
Atenciosamente
Olá @brunochikuji, tirar o #modal2 de dentro do #modal não resolveria?
https://stackblitz.com/edit/angular-ivy-5afpdw?file=src%2Fapp%2Fapp.component.html
@jcorrea97 Resolveria, porem me limita a só usar um modal.
Vou explicar um dos meus casos de uso:
Tenho um modal que mostro os detalhes de um item, nesse item tenho algumas imagens que ao clicar abro em um segundo modal.
Da forma que esta atualmente se o usuário clicar em visualizar uma imagem e clicar fora do modal esta fechando a imagem e os detalhes do item
Bom dia @brunochikuji, no caso do stackblitz enviado pelo @jcorrea97 se mantém as duas modais porém muda a estrutura do html. Para o usuário não tem diferença de uso e o problema no click-out não ocorre. Esta solução não funcionaria para você?
Estamos fechando esta issue por falta de interação. Qualquer coisa poderá ser aberta uma nova issue. Att.