Select Custom Options - Mapping an array is not working
haroonriaz-15 opened this issue · 2 comments
haroonriaz-15 commented
Description
I am using the 2.8.5 version of Saas-ui. The Select component is not working if we map the select options inside it. Its working fine for hard code options but doesn't work on map items, with multiple prop set as true. The OnChange is not being triggered
const calendar = ["Testing","Holidays","primary"];
<Select
multiple
onChange={(value) => {
alert(value);
}}
name="interest"
placeholder="Select your favourite cat"
>
<SelectButton />
<SelectList>
{/* {console.log(calendarByUser)} */}
{calendar.map((cal, index) => (
<>
<SelectOption value={cal}>
<span>{cal}</span>
</SelectOption>
{index !== arr.length - 1 && (
<MenuDivider
borderBottom={"3px solid rgba(0, 0, 0, 0.08)"}
/>
)}
</>
))}
</SelectList>
</Select>
Link to Reproduction
No response
Steps to reproduce
Copy and paste the code I shared above and select an option you will notice the onChange is not working
Saas UI Version
2.8.5
Chakra UI Version
No response
Browser
No response
Operating System
- macOS
- Windows
- Linux
Additional Information
No response
Pagebakers commented
I've just tested this and the problem seems that wrapping the select SelectOption with a fragment <></> breaks the functionality. This is a limitation of Chakra UI, not something we can fix in Saas UI at the moment unfortunately.