⭕️ OnClick not Working (Clickable Area & Propagation)

Oi seus lindos 👋🏻, vamos falar hoje de um coisa simples, mas que faz perder muitas horas de desenvolvimento, quando não estamos familiarizados com o problema. Nesse artigo irei abordar dois contextos que levaram ao mesmo problema, porém ambos foram resolvidos de forma diferente.

# Clickable Area

Primeiro vamos lidar com o cenário mais simples. Estava eu tentando resolver meus humildes problemas quando um colega de trabalho falou que não estava conseguindo executar a ação de click em um determinado botão.

Após verificarmos N situações eu me deparei com solução, mas antes de falarmos dela. Gostaria de entrar mais afundo no problema e para isso criei uma ilustração do WebBlock do input a qual estávamos com problema.

Como vocês podem ver a DIV que contém o Input em toda a área ocupada pelos elementos que compõe, além de um Ícone. Mas seu lindo uma vez que eu clique em qualquer elemento dentro do div ele ira disparar o evento do click. Aiiii que vocês se enganam, tem um excessão e foi o que aconteceu nesse caso, o input em questão estava disable o que não disparava a propagação do click para o elemento pai, apenas o ICON do lado direto fazia isso, por está por cima do elemento na hierarquia.

Lascouuu você pensaaaa, porque eu não posso habilitar o input devido a regra de negocio do cliente em questão. Calma jovem gafanhoto, nem tudo está perdido, como está escrito : conhecera a verdade e ela e libertara. Sabendo agora a origem do rolê resolve-lo se torna fácil. Vou ilustrar novamente na imagem abaixo:

Criamos mais um div dentro da div principal, colocamos a div principal como relativa que habilita usarmos o position absolute na div nova , para que ela não extrapole o escopo da div principal e para manipularmos ela sem interferir na semântica do componente. Colocamos top e bottom atributos para a div ganhar a altura do componente e definimos o tamanho de 80% , pois a área do ícone já é clickable e vualaaaa problema resolvido. Problema resolvido vamos para o próximo, next please …

# StopPropagation

Esse problema me custou alguns dias para soluciona-lo, o que se mostrou um pulo do gato que poucas pessoas no nosso universo conhecem. O cerne desse rolê começou na construção de um novo componente para um cliente. Um botão DataPicker que na minha humilde opinião foi um dos melhores layout que um UX pode conceber, ai você já viuuuuu, vai ser aquela treta para fazer funcionar. Da um sacada no bixãoooo :

Como estou adorando fazer ilustrações vou demonstrar como fiz a hierarquia desse componente utilizando classes e componentes já prontos do Outsystem UI :

Agora que entendemos como o componente foi feito, é hora de explicar o problema para vocês. Na área da lista existe pequenas pílulas com filtros pré configurados, que podem podem ser selecionado com um click, porém para minha angústia na época funcionava.

Ai você pensa , aqui deve ser a area clickable do componente igual o exemplo acima. Ai que você se engana novamente jovem gafanhoto 🦗, aqui o buraco foi o componente padrão Tooltip do Outsystem UI. Como assim seu lindooooo !??? Keep Calm Son.

O componente Tooltip da Outsystem tem um comportamento peculiar quanto aos itens que estão dentro dele. Como eu descobri isso ? Debugando o Outsystem UI utilizando o devtools.

Primeiro cliquei no ícone da pílula e fui no inspecionar e na aba Event Listeners escolhi o evento click conforme imagem :

Removei todos os eventos exceto o último que era o evento que não estava funcionando e para minha alegria, magicamente funcionou !!! Puts !!! que merda em, também achei. Então como a maioria dos eventos era do react padrão, google tag manager e facebook ads só me restou analisar o Outsystem UI. Então cliquei no link do evento para me levar para o código como diria a música para minha alegria es que encontrei o problema conforme imagem abaixo :

Ao clicar dentro do conteúdo do tooltip se não for os componentes permitido, não é disparado o evento de propagação do click o que inabilita meu evento do click da pílula. Ai quando eu descobri isso foi um PQP, por que em documentação nenhum tinha falando sobre isso é lógico.

Para resolver o meu problema, depois que descobri o cerne do rolê foi fácil. Aqui bastou procurar pelas componentes permitidos que estão nas variáveis globais do Outsystem UI (FocusableElems e AllowEventPropagation). E foi o que eu fiz conforme imagem abaixo :

ntão para resolver meu problema de onClick dessa vez bastava adicionar o atributo da imagem acima no meu elemento que possui o click conforme imagem abaixo :

# Conclusão

Quando me deparo com o problema desse, primeira coisa que penso é “devia ter colocado mais horas nessa task” . As vezes o mesmo problema tem diferente contexto e nunca podemos aplicar a mesma solução.

Contudo aqui onde vem o X da questão que salomão falou em um dos livros da bíblia, “Não existe nada de novo debaixo do céu, tudo já foi concebido”. O que ele queria dizer com isso, que apesar de ser únicos, temos os mesmo problema e enfrentamento e pensamos iguais, loucura né ??. O que nos leva a senso de comunidade, de compartilhar esse problema, para que alguma pessoa cujo esteja passando pelo mesmo problema consiga passa-lo sem dor, pois muito melhor que receber sem dúvida é dar, citando a bíblia, maior é aquele que serve.

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.