Setting a hidden attribute in dart-polymer 1.x

Issue

I am trying to toggle (hide/unhide> a state dropdown menu when the USA is selected in a country dropdown menu

.html

    <paper-dropdown-menu
              label = "Country *"
              selected-item-label = "{{countrySelectedItemLabel}}"
              error-message = "Country is required"
              id = "countryDdm">
            <paper-menu class = "dropdown-content">
              <template
                  is = "dom-repeat"
                  items = "[[countries]]"
                  as = "country">
                <div>[[country.name]]</div>
                <br>
              </template>
            </paper-menu>
          </paper-dropdown-menu>

          <div class = "layout horizontal">
            <paper-dropdown-menu
                hidden = $"[[hideState]]"
                label = "State *"
                selected-item-label = "{{stateSelectedItemLabel}}"
                id = "stateDdm">
              <paper-menu class = "dropdown-content">
                <template
                    is = "dom-repeat"
                    items = "[[states]]"
                    as = "state">
                  <div>[[state.name]]</div>
                  <br>
                </template>
              </paper-menu>
            </paper-dropdown-menu>

The relevant .dart code is shown below

##.dart


 @property
 bool hideState;


 @property
  String countrySelectedItemLabel = '';

@Listen( 'countryDdm.tap' )
  void toggleStateOnUSASelection( event, [_] ) {

    switch ( countrySelectedItemLabel ) {
       case 'United States of America':
   
        switch ( hideState ) {
          case true:
            hideState = false;
            break;

          case false:
            break;
        }
        break;
    }
  }

  void ready( ) {
    set('hideState', true);
  }

The application is displayed normally but when I select ‘United States of America’ the state combo is NOT shown. I would also like to hide the state combo if any country than the USA is selected.

Any help is appreciated. Thanks.

Solution

The $ is on the wrong position

  hidden$="[[hideState]]"

The actual hidden attribute is set by Polymer. This is to work around issues with attributes like href of the <img> element where binding expressions (strings that aren’t an actual URI to an image) would produce an error message before Polymer even had a chance to resolve the binding expression.

There are a few further issues (see the comments in the code)

dart

@HtmlImport('app_element.html')
library so33931432_hide_paper_dropdown.web.app_element;

import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/paper_dropdown_menu.dart';
import 'package:polymer_elements/paper_menu.dart';

/// [PaperDropdownMenu], [PaperMenu]
@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  @property
  List<String> countries = ['Austria', 'Belgium', 'Czech Republic', 'United States of America'];
  @property
  bool hideState; // = true; // you could set a default value, then you don't need ready

  // This way usually works better for me than @Listen
  @Property(observer: 'toggleStateOnUSASelection')
  String countrySelectedItemLabel = '';

  // If `@Property(observer: ...) is used the function signature 
  // has to be changed
  @reflectable
  void toggleStateOnUSASelection(String label, [_]) {
    switch (countrySelectedItemLabel) {
      // I wasn't sure what you actually tried to accomplish here
      // but this worked for me to reproduce your problem
      case 'United States of America':
        set('hideState', false);
        break;
      default:
        set('hideState', true);
    }
  }

  void ready() {
    set('hideState', true);
  }
}

html

<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <paper-dropdown-menu
        label="Country *"
        selected-item-label="{{countrySelectedItemLabel}}"
        error-message="Country is required"
        id="countryDdm">
      <paper-menu class="dropdown-content">
        <template
            is="dom-repeat"
            items="[[countries]]"
            as="country">
          <div label="[[country]]">[[country]]</div>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItem:<span>[[countrySelectedItemLabel]]</span> value: <span>[[countrySelectedItemLabel]]</span></div>
    <div>hideState: <span>[[hideState]]</span></div>
    <div class="layout horizontal">
      <paper-dropdown-menu
          hidden$="[[hideState]]"
          label="State *"
          selected-item-label="{{stateSelectedItemLabel}}"
          id="stateDdm">
        <paper-menu class="dropdown-content">
          <template
              is="dom-repeat"
              items="[[states]]"
              as="state">
            <div>[[state.name]]</div>
            <br>
          </template>
        </paper-menu>
      </paper-dropdown-menu>
    </div> <!-- missing in your question -->
  </template>
</dom-module>

Answered By – Günter Zöchbauer

Answer Checked By – Willingham (FlutterFixes Volunteer)

Issue

.html

Solution

Leave a Reply Cancel reply