Radio options within a ChoiceList component cannot be selected

[chaddjohnson]

Issue summary

Expected behavior

I should be able to select different radio options within a ChoiceList component.

Actual behavior

I am unable to select radio options in a ChoiceList component. Here I am unable to select the "Required" option:

Steps to reproduce the problem

1. Clone this fork.
2. Run cd examples/webpack.
3. Run rm yarn.lock.
4. Run yarn install.
5. Run yarn start.
6. Visit http://localhost:8080.

You will see that only the default option, "Hidden," can be selected within the "Choice list" section.

Specifications

• Polaris version: I tried with v1.0.1 (as in example) as well as 1.8.0 (and updated the CSS file to use 1.8.0).
• React version: ^15.4.2 and ^16.0.0.
• Browser: Chrome 61.0.3163.100 (Official Build) (64-bit)
• Device: 2015 MacBook
• Operating System: macOS High Sierra 10.13

---

⚓️ We’re not accepting pull requests at this time
🗒 This repo is for reporting issues and feature requests only

[charlesemarsh]

+1 I'm getting this issue also, same thing with Checkboxs...

I noticed a console log of "Shopify.API.Bar.closeDropdown" when the checkbox and choices are clicked

[chloerice]

Hi @chaddjohnson, thanks for reaching out!

You've got two ChoiceLists in the webpack example in your Polaris clone. The second works as expected, but the first one copied from the Polaris style guide needs a couple of changes to work as expected (we're working on clearer style guide examples, sorry for any ambiguity).

• The onChange prop, which updates the state when a choice is selected, is missing.
• The selected prop needs to change dynamically each time a choice is selected (when onChange is called). Since it's hardcoded as ['hidden'] and it doesn't have the onChange prop, the selection in the first ChoiceList remains the same.

With those two things fixed your first ChoiceList will be good to go.

One quick tip--when you use more than one ChoiceList, it's a good idea to use the optional name prop. The method you pass as the onChange prop receives two parameters. The first parameter is the array of values from selected choices and the second is the name given to the ChoiceList. You can use this name in your state to hold on to each ChoiceList's array of selected choices.

The code below has the changes mentioned above along with an update to your valueUpdater method to utilize the ChoiceList names given. @charlesemarsh I hope this helps you as well!

Click to view collapsed example code

```jsx import React, {Component} from 'react'; import { Layout, Page, FooterHelp, Card, Link, Button, FormLayout, TextField, AccountConnection, ChoiceList, SettingToggle, } from '@shopify/polaris'; class App extends Component { constructor(props) { super(props); this.state = { first: '', last: '', email: '', companyName: ['hidden'], termsOfService: [], connected: false, } } render() { const breadcrumbs = [ {content: 'Example apps'}, {content: 'webpack'}, ]; const primaryAction = {content: 'New product'}; const secondaryActions = [{content: 'Import', icon: 'import'}]; const choiceListItems = [ {label: 'I accept the Terms of Service', value: 'false'}, {label: 'I consent to receiving emails', value: 'false2'}, ]; return ( Upload your store’s logo, change colors and fonts, and more. {this.renderAccount()} Submit For more details on Polaris, visit our styleguide. ); } valueUpdater(field) { return (value, name) => { if (field === 'checkboxes') return this.setState({[name]: value}); this.setState({[field]: value}); } } toggleConnection() { this.setState(({connected}) => ({connected: !connected})); } connectAccountMarkup() { return ( By clicking Connect, you are accepting Sample’s Terms and Conditions, including a commission rate of 15% on sales.

} /> ); } disconnectAccountMarkup() { return ( Tom Ford} details="Account id: d587647ae4" /> ); } renderAccount() { return this.state.connected ? this.disconnectAccountMarkup() : this.connectAccountMarkup(); } } export default App; ```

[chaddjohnson]

Thank you @chloerice! That works.