There is an issue on polymer3.x UI on hidden functionality

Question

I'm facing issues in hidden functionality. I'm passing the values from one page to another page, I am able to get the bind value but, not able to apply bind value to hidden property.

//..........First page........

// On-tap() while clicking the button this method will execute.Passing the dependent type ,cshoweditview and pshoweditview values to the next page through the reference object.
onAdd() {

  if (this.selection == "Partner") {

    var reference = {
      'type': this.selection,
      'cshowEditView': false,
      'pshowEditView': true

    };
    console.log(reference);

    this.reference = reference;
    console.log("78" + this.reference);
    this.set('view', 'edit-view');
  } else if (this.selection == "Children") {

    var reference = {
      'type': this.selection,
      'cshowEditView': true,
      'pshowEditView': false,

    };
    console.log(reference);

    this.reference = reference;
    console.log("89" + this.reference);
    this.set('view', 'edit-view');

  }

}

<!-- ............First page................... -->
<paper-dropdown-menu label="DEPENDENT TYPE" id="crsp-security" class="menu" error-message="Security Clerance is required!">
  <paper-listbox slot="dropdown-content" id="atype" selected="{{selection}}" class="dropdown-content menu" required fallback-selection="0" attr-for-selected="value">
    <paper-item value="Partner">Partner</paper-item>
    <paper-item value="Children">Children</paper-item>
    <paper-item value="Nominee">Nominee</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<paper-button id="add-icon" on-tap="onAdd" raised class="blue">
  <span>Add Dependent</span>
</paper-button>
<dependent-info id="detailView" name="edit-view" view="{{view}}" state="[[reference]]" list="{{references}}"></dependent-info>



<!-- ......Second page............ // I am trying to bind the values to this hidden property. -->
<paper-dropdown-menu label="CHILD" id="cshowEditView" name="cshowEditView" class="menu" value="{{state.cshowEditView}}" hidden$=[[!state.cshowEditView]] error-message="Company Type is required!">
  <paper-listbox slot="dropdown-content" id="title" class="dropdown-content menu" required attr-for-selected="value">

    <paper-item value="Mr">Mr</paper-item>
    <paper-item value="Mrs">Mrs</paper-item>
    <paper-item value="Miss">Miss</paper-item>

  </paper-listbox>
</paper-dropdown-menu>

<paper-dropdown-menu label="PARTNER" id="pshowEditView" name="pshowEditView" hidden$=[[!state.pshowEditView]] class="menu" error-message="Company Type is required!">
  <paper-listbox slot="dropdown-content" id="title" class="dropdown-content menu" required fallback-selection="1" attr-for-selected="value">
    <paper-item value="Mr">Mr</paper-item>
    <paper-item value="Mrs">Mrs</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

How are your pages are all page defined in the same file or separated files (schema of the directory ?) — Cappittall, Dec 18 '18 at 13:22
Have you defined `state: { type: Object }` at property decleration a second page ? — Cappittall, Dec 18 '18 at 13:58

Cappittall · Answer 1 · 2018-12-18T21:06:29.617

0

Try to use this.set method for object's observable changes. First set object values at parent at ready function for instance:

DEMO

ready() {
    super.ready()
    this.set('reference', { 'type' : 'Partner',
                        'cshowEditView' :true,
                        'pshowEditView' : false }
}

Then set the reference property something like:

onAdd () {
        this.set('reference.type', this.selection)
        this.set('reference.cshowEditView', this.selection=="Partner" ? true:false)
        this.set('reference.pshowEditView', this.selection=="Partner" ? false:true)
}

edited Dec 18 '18 at 21:06

answered Dec 18 '18 at 14:11

Cappittall

3,300
3
15
23

above code is not working (i mean hidden functionality ) – mounika Dec 18 '18 at 14:27
Can you add an observer in order to check whether `state` property changed or not, will be better to add in observer at child in ie: `static get observers() { return [`checkState(state.*)]}` and its functions ` checkState(st) {console.log(st)}` – Cappittall Dec 18 '18 at 14:31
Also, add quotes to `hidden$="[[!state.cshowEditView]]"` – Cappittall Dec 18 '18 at 14:43
The state property passes to the child element without the problem. I tried to illustrate it at demo link above. The only problem your fallback-selection, you provided as `attr-for-selected="value", so the value should be one of value something like: `fallback-selection="Partner" ` – Cappittall Dec 18 '18 at 21:06

There is an issue on polymer3.x UI on hidden functionality

1 Answers1