Treballar amb Radix UI utilitzat sota el capó a shadcn ui sol ser una experiència fluida, componible i accessible, però hi ha un parany subtil que pot trencar la interacció entre components.
El problema que vaig trobar va ser senzill i alhora confús: vaig embolicar un DialogTrigger amb un Tooltip i en fer clic no passava res. No hi havia errors ni warnings, simplement un botó que no obria el diàleg.
La causa arrel és l'ús de la prop asChild en components com DialogTrigger i TooltipTrigger. asChild fa que el component no renderitzi un element DOM propi, sinó que delegui atributs i gestors d'esdeveniments al fill real. Si el fill no és un element DOM sinó un altre component React, els gestors no arriben a un node real i, per tant, no es dispara la lògica esperada.
En l'exemple trencat, el DialogTrigger embolicava el Tooltip, que al seu torn és un component React i no un element DOM directe. Com a resultat, el clic no va arribar a cap element que Dialog pogués utilitzar per obrir el diàleg.
La versió que funciona col·loca el Tooltip com a embolcall exterior i fa que TooltipTrigger utilitzi asChild per passar props a DialogTrigger, i que DialogTrigger al seu torn passi props al Button final. D'aquesta manera, el Button es converteix en l'element DOM únic que rep tots dos comportaments i tot funciona correctament.
Regla pràctica: sempre col·locar l'embolcall exterior com a Tooltip a fora i assegurar-se que l'element DOM final com a Button estigui dins d'ambdós triggers utilitzant asChild perquè els gestors es combinin en el mateix node.
Consejos per depurar: inspecciona el DOM al navegador per comprovar quin element rep els onClick i altres props. Si veus que el gestor està en un component intermedi que no produeix un node DOM real, prova a invertir l'ordre de nidificació o moure asChild al component que embolica directament l'element HTML.
A Q2BSTUDIO, com a empresa de desenvolupament de programari i aplicacions a mida, ajudem equips a evitar aquest tipus d'errors i a construir interfícies robustes i accessibles. Oferim serveis de programari a mida, desenvolupament d'aplicacions a mida i integració d'intel·ligència artificial per a empreses, incloent agents IA i solucions amb Power BI.
Els nostres serveis també cobreixen ciberseguretat per protegir les teves aplicacions, serveis cloud aws i azure, serveis d'intel·ligència de negoci i projectes d'intel·ligència artificial orientats a resultats. Si necessites assessorament per implementar components UI, corregir patrons de nidificació o crear solucions a mida amb IA i seguretat al núvol, podem ajudar-te.
Paraules clau: aplicacions a mida, programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud aws i azure, serveis d'intel·ligència de negoci, IA per a empreses, agents IA, power bi
Si vols que revisem el teu codi o et donem suport en un projecte, posa't en contacte amb Q2BSTUDIO i t'ajudem a optimitzar el teu stack i a evitar problemes comuns com el de Dialog embolicat en Tooltip.
