Make all state drop-downs only show when country has a state

[joeholdcroft]

How to do this in a nice way?

[joeholdcroft]

I have implemented a Javascript library that handles this. It works like so:

• Ensure the JS files @Message:Mothership:ControlPanel::resources:assets:js:filteredSelect.jquery.js and @Message:Mothership:Commerce::resources:assets:js:state-filter.js are included on the page
• Add the data-state-filter-country-selector attribute to the state <select> element, where the value is a CSS/jQuery selector to the related country <select> element. Here's an example of how to do that with Twig

    {{ form_row(form.billing.country_id) }}
    {{ form_row(form.billing.state_id, {
        attr: {
            'data-state-filter-country-selector': '#' ~ form.billing.country_id.vars.id
        }
    }) }}

[joeholdcroft]

Though it occurs to me that unless the page is in the commerce cogule or something that depends on it, we will have inverted the dependencies. Perhaps we should move the JS for this to the mothership-user cogule? Or, better yet, figure out a way to use require.js to handle our JS dependency woes.

[thomasjthomasj]

Presumably this is possible from the creation of the form?

I mean I guess no better way to try but I'm using two instances of the same address form for billing and delivery, so I was thinking like this:

    $this->add($name.'_state', 'choice', '', array(
        'expanded'  => false,
        'multiple'  => false,
        'choices'   => $this->_container['state.list']->all(),
        'attr'      => array(
            'data-state-filter-country-selector'    => "'#' ~ form." . $name . ".country.vars.id"
        )
    ))->val()->optional();

[joeholdcroft]

That'd also work. Well, the string for the ID wouldn't as it still contains twig variables... I did it in the view as it seemed more like a "view layer" kinda thing.

[thomasjthomasj]

Hmm yeah I did it with the correct ID (although it had to be hard coded):

        'attr'      => array(
            'data-state-filter-country-selector'    => "#address_" . $name . "_" . $name . "_country"
        )

but it still doesn't work. It's picking it up okay as the state field disappears, but appears to have problems listening as it doesn't appear when you select united states

I have to do it at that lower level because, since the delivery form and billing form are identical, they're both instances of the same class as subforms, so just get rendered in one line of the twig template

[thomasjthomasj]

Okay well I didn't change anything but it's working now. Spooky!

[lsjroberts]

@thomasjthomasj Is this good for QA / closing?

[RosieRoylance-White]

Hey chaps, trying to clear the white board up a bit, is this one good to go? :-)

[joeholdcroft]

Not sure - we need to check all forms with a state input. I think most are done but we need to check all.