Google Dart Drop-down Visibility Logic

Question

I'm trying to have a dropdown element visual or not depending on which radio button is clicked. If the "ad-hoc" radio button is clicked, the dropdown element should be hidden. If the "predefined" radio button is clicked, the dropdown element should not be hidden. The problem is the control seems to take two clicks to do the expected action above and should only require one click. Any recommendations would be appreciated. Please let me know if you need more information.

HTML:

        <paper-radio-group selected="small">
          <paper-radio-button name="predefined" id="predefined" label="Predefined"></paper-radio-button>
          <paper-radio-button name="adhoc" id="adhoc" label="Ad-hoc"></paper-radio-button>
          </paper-radio-group>
          <div class="row yellowBorder form">
            <div class="large-12 columns">
              <select id="asset" class="titilium" selectedIndex="{{currentIndex}}" value="{{dropDownValue}}" on-change="{{changedHandler}}" required>
                <option value="Placeholder A">Placeholder A</option>
                <option value="Placeholder B">Placeholder B</option>
                <option value="Placeholder C">Placeholder C</option>
                <option value="Placeholder D">Placeholder D</option>
                <option value="Placeholder E">Placeholder E</option>
                <option value="Placeholder F">Placeholder F</option>
                <option value="Placeholder G">Placeholder G</option>
                <option value="Placeholder H">Placeholder H</option>
                <option value="Placeholder I">Placeholder I</option>
            </select>
            </div>

Dart:

InputElement predefinedCheckBox = shroot.querySelector("#predefined");
    InputElement adhoc = shroot.querySelector("#adhoc");
    var dropDownValue = shroot.querySelector("#asset");

    predefinedCheckBox.checked = true;

    predefinedCheckBox.onClick.listen((e){

        if (predefinedCheckBox.checked == true) {
          print("predefined checked");
          dropDownValue.hidden = false;
        } else {
          print("predefined not checked");
          dropDownValue.hidden = true;
        }

      });

    adhoc.onClick.listen((e){
      if (adhoc.checked == true) {
                print("adhoc checked");
                dropDownValue.hidden = true;
              } else {
                print("adhoc not checked");
                dropDownValue.hidden = false;
              }
    });

Answer 1

I guess checked is not yet set when the click handler is executed but your print statements should show whether this is the case.

When you pack all your code into a Polymer element you can bind the radio group value to an @observable String radioValue; of that element and wrap the dropdown in a <template if=...> and polymer does all the show hide for you.

<template if="{{radioValue == 'predifined'}}">
  <div class="row yellowBorder form">
    <div class="large-12 columns">
      <select id="asset" class="titilium" selectedIndex="{{currentIndex}}" value="{{dropDownValue}}" on-change="{{changedHandler}}" required>
        <option value="Placeholder A">Placeholder A</option>
        <option value="Placeholder B">Placeholder B</option>
        <option value="Placeholder C">Placeholder C</option>
        <option value="Placeholder D">Placeholder D</option>
        <option value="Placeholder E">Placeholder E</option>
        <option value="Placeholder F">Placeholder F</option>
        <option value="Placeholder G">Placeholder G</option>
        <option value="Placeholder H">Placeholder H</option>
        <option value="Placeholder I">Placeholder I</option>
      </select>
    </div>      
  </div>
</template>