Tengo un diseño en el que necesito combinar un grupo de radio y seleccionar elementos juntos. Específicamente, cuando un usuario selecciona una opción, debe seleccionar un elemento de la lista.
Mi implementación en https://codesandbox.io/s/chakra-radio-select-cv6r0?file=/src/index.tsx muestra cómo debería verse.
Sin embargo, cuando hago clic en la lista para seleccionar del menú desplegable, no sucede nada.
La selección funciona de forma independiente, pero no cuando está anidada dentro de RadioGroup. Esto es reproducible en codesandbox
¿Alguien podría ayudarme a entender qué es incorrecto aquí y qué debo hacer para poder seleccionar el elemento de la lista?
Gracias
Simplemente mueva la entrada Select fuera del componente Radio así
<Flex alignItems={"center"}> <Radio value={"LIST"}> <Text ml={2}>List</Text> </Radio> <Select w="unset" ml={4} placeholder="Select List" onChange={() => console.log("change")} value={"option 1"} > <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </Select> </Flex>