How to retrieve the current input in a paper-dropdown-menu

Issue

I have the following snippets of a paper-dropdown-menu

.dart

….

@property
List<String> suffixes = <String>[
  'I',
  'II',
  'III',
  'Junior',
  'Senior'
];

.html

<paper-dropdown-menu label = "Suffix">
  <paper-menu class = "dropdown-content">
    <template is = "dom-repeat"
              items = "[[suffixes]]"
              as = "suffix">
      <paper-item>[[suffix]]</paper-item>
    </template>
  </paper-menu>
</paper-dropdown-menu>

What is the correct .dart code to get the selection made in the dropdown?

Thanks

Solution

There are several ways to achieve this.
The example below shows two ways using selected-item and selected-item-label

.html

<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <paper-dropdown-menu label = "Suffix"
                         selected-item="{{selectedItem}}">
      <paper-menu class = "dropdown-content">
        <template id="ddmtr" is="dom-repeat"
                  items="[[suffixes]]"
                  as="suffix">
          <paper-item label="suffix">[[suffix]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItem:<span>[[selectedItem]]</span> value: <span>[[selectedItemValue]]</span></div>

    <paper-dropdown-menu label = "Suffix"
                         selected-item-label="{{selectedItemLabel}}">
      <paper-menu class = "dropdown-content">
        <template is="dom-repeat"
                  items="[[suffixes]]"
                  as="suffix">
          <paper-item>[[suffix]]</paper-item>
          <!-- <paper-item label="suffix">[[suffix]]</paper-item> -->
          <!-- if the label attribute is not set, the text content is used -->
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItemLabel:<span>[[selectedItemLabel]]</span></div>
  </template>
</dom-module>

.dart

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

import 'dart:html' as dom;
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';
import 'package:polymer_elements/paper_item.dart';

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

  @property var selectedItem;

  @property var selectedItemLabel;

  @Property(computed: 'getSelectedItemValue(selectedItem)')
  String selectedItemValue;

  @reflectable
  String getSelectedItemValue(dom.Element selectedItem) {
    DomRepeatModel model =
        ($['ddmtr'] as DomRepeat).modelForElement(selectedItem);
    return suffixes[model.index];
  }

  @property
  List<String> suffixes = <String>[
    'I',
    'II',
    'III',
    'Junior',
    'Senior'
  ];
}

Answered By – Günter Zöchbauer

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Issue

.dart

.html

Solution

Leave a Reply Cancel reply