Select does not work when combined with Radio in Chakra-UI

Question

I have a design where I need to combine radio group and select items together. Specifically, when a user select an option, then need to select an item from the list.

My implementation at https://codesandbox.io/s/chakra-radio-select-cv6r0?file=/src/index.tsx shows how it should look.

However, when I click on the list to select from drop down, nothing happens.

The select works independently, but not when nested inside RadioGroup. This is reproducible on codesandbox

Could someone help me understand what is incorrect here and what I need to do to be able to select the item from the list?

Thanks

Answer 1

Just move the Select input outside of the Radio component like this

<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>