Issue setting initial values of oj-select-single inside a oj-list-view

Sirish Reddy

I have an <oj-checkboxset> and an <oj-select-single> menu inside an <oj-list-view> component. <oj-list-view> component is placed inside an <oj-dialog>... The list data displays fine, but my oj-select-single value is not getting set. oj-checkboxset value is getting set and the values reflects fine, but oj-select-single doesn't reflect on screen.

--------------my oj-dialog------------------

<oj-dialog style="display:none;" class="ss-coauthor-dialog" id="coauth_dialog" dialog-title="Add coauthors">

  <oj-defer>

    <div slot="body">

      <div slot="assembly"

         id="assembly-tab-panel"

         role="tabpanel" 

         aria-labelledby="assembly-tab">

        <div class="demo-tab-content">

          <h2></h2>

          <oj-list-view id="assemblyListview" data="[[assemblyCoAuthors]]" drill-mode="none" selection-mode="none"

                 selection="{{asmCoAuthSelected}}">

            <template slot="itemTemplate">

              <div class="oj-flex" style="flex-wrap: nowrap">

                <div class="oj-flex-item oj-md-1">

                  <oj-checkboxset value='[[asmHandleCheckbox($current.data.value)]]'

                          on-value-changed='[[asmCoAuthListener]]'

                          class='oj-checkboxset-no-chrome oj-clickthrough-disabled'

                          :id="[['assemblyListviewSet' + $current.data.value]]"

                          :data-row-id="{{$current.data.value}}">

                    <oj-option value="checked" :id="[['assemblyListview' + $current.data.value]]">

                    </oj-option>

                  </oj-checkboxset>

                </div>

                <div class="oj-flex-item">

                  <div>

                    <strong>

                      <oj-bind-text value="[[$current.data.label]]"></oj-bind-text>

                    </strong>

                  </div>

                </div>             

                <div class="oj-flex-item oj-md-6">

                  <oj-select-single data='[[asmAuthorsDataProvider]]'

                           value='[[asmAuthorTypeHandle($current.data.value)]]'

                           label-hint='Select Author Type'

                           label-edge='none'

                           placeholder='place holder'

                           on-value-changed='[[asmAuthorTypeListener]]'

                           disabled='[[asmAuthorTypeDisable($current.data.value)]]'

                           :id="[['authorSelect' + $current.data.value]]"

                           :data-row-id="{{$current.data.value}}">

                  </oj-select-single>

                </div>

              </div>

            </template>

          </oj-list-view>

        </div>

      </div>

    </div>

    <div slot="footer">

      <oj-button id="addCoAuthButton" on-oj-action="[[addCoAuthor]]">ADD</oj-button>

    </div>

  </oj-defer>

</oj-dialog>

----- My js methods-------

self.asmAuthorType = [

          {value: "RC", label: "Regular Coauthor"},

          {value: "PC", label: "Principal Coauthor"},

          {value: "JA", label: "Joint Author"},

        ];

        self.asmAuthorsDataProvider = new oj.ArrayDataProvider(self.asmAuthorType, {

          keyAttributes: "value",

        });

PROBLEM AREA:

When values are matching, the below method returns me the correct value, but on oj-select-single it always displays Regular Coauthor even though the values are PC or JA.

self.asmAuthorTypeHandle = function (id) {

          // If an entry is found it will return the value

          self.asmAuthorTypeSelected().forEach(function (thisAuthorTypeObj) {

            if (thisAuthorTypeObj.id === id) {

              console.log('thisAuthorTypeObj.id::'+thisAuthorTypeObj.id);

              console.log('id::'+id);

              console.log('value::'+thisAuthorTypeObj.value);

              return thisAuthorTypeObj.value;

            }

          });

          // If no entry found, then return the default value

          return "RC";

        };

The below checkbox value reflects fine on screen

self.asmHandleCheckbox = function (id) {           

          return self.asmCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];

        };

Can someone please help me with identifying the issue. I highly appreciate it.

Thanks.

John 'JB' Brock-Oracle

Two things are going on in your forEach loop.

1) You are testing for a comparison of "id" against the wrong value. You should be testing against "thisAuthorTypeObj.value"

2) Your return out of the forEach is not going to return you out of the full if statement. The return "RC" command is always going to get run last, and so you will always see RC as the default. Change your method to look like this.

  asmAuthorTypeHandle = (id) => {
    let temp = "RC";
    // If an entry is found it will return the value
    this.asmAuthorTypeSelected.forEach(function (thisAuthorTypeObj) {
      if (thisAuthorTypeObj.value === id) {
        console.log('thisAuthorTypeObj.id::' + thisAuthorTypeObj.id);
        console.log('id::' + id);
        console.log('value::' + thisAuthorTypeObj.value);
        temp = thisAuthorTypeObj.value;
      }
    });
    // If no entry found, then return the default value
    return temp;
  };

This will return the proper value from the object items that your are doing the forEach against.

John 'JB' Brock-Oracle

I setup a local repro case as best I could, using strings for most of the function returns, and it works fine. My guess is that the asmAuthorTypeHandle method is not actually returning a string all of the time.

If you comment out all of the conditional code in that method, and just let it always return "RC", do you see it working?

What version of JET are you working with?

Sirish Reddy

Thanks for the response John! The handling always assumes the default value while rendering. I see the below message in console... The value is what I am returning from self.asmAuthorTypeHandle. Still it assumes default value RC for both AD04 and AD31 and the oj-select-single displays Regular Coauthor.

-----console message-------

thisAuthorTypeObj.id::AD04

id::AD04

value::PC

thisAuthorTypeObj.id::AD31

id::AD31

value::JA

---------------

My application is running on

Oracle JET Command Line Interface, version: 9.0.0, built on Alta (Web) theme.

Thanks.

John 'JB' Brock-Oracle

Two things are going on in your forEach loop.

1) You are testing for a comparison of "id" against the wrong value. You should be testing against "thisAuthorTypeObj.value"

2) Your return out of the forEach is not going to return you out of the full if statement. The return "RC" command is always going to get run last, and so you will always see RC as the default. Change your method to look like this.

  asmAuthorTypeHandle = (id) => {
    let temp = "RC";
    // If an entry is found it will return the value
    this.asmAuthorTypeSelected.forEach(function (thisAuthorTypeObj) {
      if (thisAuthorTypeObj.value === id) {
        console.log('thisAuthorTypeObj.id::' + thisAuthorTypeObj.id);
        console.log('id::' + id);
        console.log('value::' + thisAuthorTypeObj.value);
        temp = thisAuthorTypeObj.value;
      }
    });
    // If no entry found, then return the default value
    return temp;
  };

This will return the proper value from the object items that your are doing the forEach against.

Sirish Reddy

Thanks John! Changing the return handling worked!

Being a primary Java developer, I did not realize that the for loop continues to execute after return statement.

Thanks again.