Enterprise-ng: Lookup with pre selected value cannot change that value

[gushanson]

Describe the bug
Using a single select Lookup with source attribute, when a value is pre-selected, the selection dialog will automatically close when opened and the value can therefore not be changed.

To Reproduce
Steps to reproduce the behavior:
Unzip
lookup.demo.html.zip
into ./src/app/lookup

1. Go to http://localhost:4200/lookup
2. Click magnifying glass button
   Error: the dialog is closed when data is loaded.

Expected behavior
The dialog remains opened, allowing for the user to select a new value.

Version

• ids-enterprise-ng: 5

Platform

• Win 10
• Chrome, Edge

Additional context
Moved to the EP project: infor-design/enterprise#1654

[cshirole]

lookup.zip

HI @tmcconechy Please take a look at this example, You just need to unzip the files in ./src/app/lookup

[tmcconechy]

Any idea if this is a regression? If so in what version did it work?

[cshirole]

I am not sure if this is a regression but it worked with Infor OS 12.0.29 and HomePages version 12.0.29. We started facing issues when we upgraded the environment to Infor OS 12.0.31 and HomePages version 12.0.30. Hope this helps.

[cshirole]

I just found that Home Page 12.0.29 uses 4.7.0 while 12.0.31 uses 4.11.0.

[tmcconechy]

Finish this probably along with #351

[volante007]

Worth noting is that the behavior is different if the method bound to the [source] input immediately calls the response() function or not. So it might be a timing issue somewhere when asynchronous.

soho-lookup [source]="lookupSource.bind(this)"

// Described issue occurs
lookupSource(req: SohoDataGridSourceRequest, response: SohoDataGridResponseFunction) {
   setTimeout(() => {
         response(this.lookupData, req);
    }, 2000);
}

// Described issue does not occur. However, the lookup value is not selected in the grid
lookupSource(req: SohoDataGridSourceRequest, response: SohoDataGridResponseFunction) {
   response(this.lookupData, req);
}

[tmcconechy]

Just noting i cant seem to reproduce this in the EP project - this page is somewhat similar:

http://master-enterprise.demo.design.infor.com/components/lookup/test-paging-server-side-and-autocomplete.html

[bthharper]

Looks like a zone issue, so try this for the source:

  source = (
    req: SohoDataGridSourceRequest,
    response: SohoDataGridResponseFunction
  ) => {
    this.ngZone.run(() => {
      console.log(`called`);
      const filter =
        req.filterExpr && req.filterExpr[0] && req.filterExpr[0].value;
      this.requestData(filter, req.activePage, req.pagesize).then(result => {
        req.total = result.total;
        this.ngZone.runOutsideAngular(() => {
          response(result.data, req);
        });
      });
    });
  };

and

<input soho-lookup
            [(ngModel)]="model.singleobjectexists"
            [columns]="columns_product"
            [options]="{
              paging: true,
              pagesize: 5,
              pagesizes: [3, 5, 10, 15]
            }"
            [source]="source"
            field="productId"
            name="product_single_object_exists"
            asobject />

[bthharper]

This is working for me too:

lookupSource = (req: SohoDataGridSourceRequest, response: SohoDataGridResponseFunction) => {
    console.log(`help`);
    setTimeout(() => {
      response(this.data_product, req);
    });
  }

[bthharper]

Actually, scratch the above as after replicating the issue with the attached zip, I tracked the code that was closing the modal to the following:

if (this.settings.options) {
        lookupGrid.on('selected.lookup', function (e, selectedRows) {
          // Only proceed if a row is selected
          if (!selectedRows || selectedRows.length === 0) {
            return;
          }

          if (self.settings.validator) {
            self.settings.validator(self.element, self.modal, self.grid);
          }

          if (self.settings.options.selectable === 'single' && self.settings.autoApply) {
            self.modal.close();
            self.insertRows();
          }
        });
      }

[bthharper]

@tmcconechy - in the code above the self.modal.close() is being called in the attached example.

[tmcconechy]

OK, thats the case it seems like this would get fixed if https://github.com/infor-design/enterprise-ng/issues/351 is fixed, because then it wont select the first one?

[bthharper]

Yeah - is it having paging that's doing this?

[tmcconechy]

Maybe, but it doesnt seems to do it anyplace but the NG example. Does that zone issue apply on that issue maybe?

[bthharper]

Possibly, but when I debug I always hit that modal.close code when setting the value. Not sure there's a fix in the angular components for this. If you debug the enterprise controls, does it not hit that code at all?

[tmcconechy]

Seems like an EP bug but - someone will try and make an example and track it down further next sprint. Does the zone workaround work?

[bthharper]

Not reliably.

[deep7102]

Moved to the EP project: infor-design/enterprise#1654