Ir al contenido principal

Entradas

Mostrando entradas de febrero, 2026

Dialog de shadcn/ui conteniendo un button

 Tengo un button de HTML como JSX dentro del contenido de un Dialog de shadcn/ui. Quiero que cada vez que hago click en el button se actualice un estado del contenedor y que el Dialog no se cierre. Pero en cambio, cada vez que hago click en el button el Dialog se cierra. Entiendo perfectamente el problema. El comportamiento que experimentas se debe generalmente a que, dentro de los componentes de diálogo (como Radix UI, que usa Shadcn), ciertos elementos como botones dentro de un DialogFooter o el uso accidental de DialogClose provocan el cierre automático. Además, si el botón está dentro de un formulario, un evento de submit no controlado también podría interferir. Para solucionar esto, debemos asegurar que el botón tenga el atributo type="button" explícito y que usemos e.preventDefault() y e.stopPropagation() para evitar que el evento "burbujee" hacia los controladores de cierre del Dialog. Voy a generarte un ejemplo funcional que demuestra cómo mantener el ...

Glifo de Checkbox para estado=indeterminate

Quiero que el glyph para el estado indeterminate de un Checkbox de shadcn/ui con Radix UI sea una raya horizontal. Para lograr que el checkbox de shadcn/ui (que utiliza Radix UI) muestre una raya horizontal en el estado indeterminate , debemos modificar el componente para que detecte dicho estado y renderice un icono diferente al de verificación ( Check ). He preparado una versión completa y funcional del componente Checkbox junto con un ejemplo de uso para que puedas probarlo directamente. Checkbox de Shadcn con Estado Indeterminado Feb 28, 1:45 PM import React , { useState , useEffect } from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check , Minus } from "lucide-react" import { clsx , type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" // Utilidad para manejar clases de Tailwind function cn (... inputs : ClassValue []) { return twMerge ( clsx ( ...