vendredi 20 décembre 2019

Allow click on "row" or checkbox within "row" (polymer)

I have a polymer template that looks like this:

<paper-dropdown-menu id="myMenu" label="checkbox list" multi>
   <paper-listbox class="dropdown-content">
      <template is="dom-repeat" items="[[availableItems]]">
         <paper-item on-tap="menuCheckedChanged">
            <paper-checkbox id$="chkClass_" checked="">
              [[item]]
            </paper-checkbox>
         </paper-item>
      </template>
   </paper-listbox>
</paper-dropdown-menu>

As you can see, I'm trying to react to the on-tap event of the paper-item and not the only it's child paper-checkbox. I'd like the user to be able to check an item in the list when they click anywhere on the "row". Mainly because the paper-dropdown-menu closes when you click anywhere on the "row" (paper-item).

The menuCheckedChanged function looks like this:

menuCheckedChanged: function(e) {
      var index = e.model.index;
      var item = e.model.item;
      var checkbox;
      if(e.target.tagName == "PAPER-ITEM") {
        checkbox = e.target.firstChild;
        this.eventFire(checkbox, 'tap');
        return;
      } else {
        checkbox = document.getElementById("chkClass_" + index);
      }
      if (checkbox.checked) {
        this.push("myItems", item);
        this.notifySplices("myItems", this.myItems);
      } else {
        this.removeItem(item);
      }
      this._changed();
    },
    eventFire: function(el, etype){
      if (el.fireEvent) {
        el.fireEvent('on' + etype);
      } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
      }
    },

As you can see, the strategy I'm trying is to inspect e.target to determine which element was "tapped" and mimic the "tap" event of the checkbox if it the target was the paper-item (row). I expect the new event to toggle the checked attribute of the checkbox I'm firing a tap for. But it doesn't (though it does invoke the menuCheckChanged function).

Any ideas how I can achieve the desired behavior?




Aucun commentaire:

Enregistrer un commentaire