Bug with Typeahead displaying first selection in all subsequent selections. #839

Anthony_Albutt created 3 years ago

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

ABP Framework version: v4.1.2
UI type: MVC
DB provider: EF Core
Tiered (MVC) or Identity Server Seperated (Angular): no
Exception message and stack trace: None
Steps to reproduce the issue: see below
Create a entity called City and add 10 records
Create a entity called Trip with property: Title and two Navigation properties called FromCity and ToCity: Project created with ABP Suite ! Trip domain entity

public class Trip : FullAuditedAggregateRoot
{
[CanBeNull]
public virtual string Title { get; set; }


  public virtual DateTime FromDate { get; set; }

  public virtual DateTime ToDate { get; set; }
  public Guid? FromCityId { get; set; }
  public Guid? ToCityId { get; set; }

  public Trip()
  {

  }

  public Trip(Guid id, string title, DateTime fromDate, DateTime toDate)
  {
      Id = id;
      Check.Length(title, nameof(title), TripConsts.TitleMaxLength, 0);
      Title = title;
      FromDate = fromDate;
      ToDate = toDate;
  }

Create one record, select two difirent cities for FromCity and ToCity
Create works and displays correctly
Edit does not display correctly. Edit then displays First selected city in all subsequent selections. (noted in my main project - repreduces in small demo project)

The problem seems to be that the selected city is not displayed, but you can only see the first city on the list.

The problem seems to be with the request to edit request https://localhost:44331/Trips/EditModal?id=318059ef-3fc5-8007-d9b1-39fa3b4082ad&fromCityIdDisplayName=Durban&toCityIdDisplayName=Durban This is the generated code

    ajax: abp.libs.datatables.createAjax(tripService.getList, getFilter),
    columnDefs: [
        {
            rowAction: {
                items:
                    [
                        {
                            text: l("Edit"),
                            visible: abp.auth.isGranted('TypeaheadTest.Trips.Edit'),
                            action: function (data) {
                                editModal.open({
                                    id: data.record.trip.id,
                                    fromCityIdDisplayName: data.record.city != null ? data.record.city.name : ' - '
                                    ,
                                    toCityIdDisplayName: data.record.city != null ? data.record.city.name : ' - '
                                });
                            }
                        },

The error is this line 'toCityIdDisplayName: data.record.city != null ? data.record.city.name : ' - '' should be 'toCityIdDisplayName: data.record.city1 != null ? data.record.city1.name : ' - ''

Second problem, if you change any field's data during edit, and save, then the Typeahead fields selections are not saved, unless you re-select them or change them. (values are lossed) Therefore, if you change the value of the entity field "Title" in edit form, the FromCityId and ToCityId data is not passed to the backend and is lossed on save. This may need a hidden field or ....

To solve this problem, I did the following. In the EditModale.cshtml.cs file, I have the two domain objects as generated be the code In the EditModal.cshtml file, I added the <Option > tag

The two Combo selected values are nolonger grey, but selected

This solves the problem, and the part one's generated code can be removed. It is not nessesary to add the DisplayName Value in the Edit request call for record edit select. (part one of the solution) Removed the code

2 Answer(s)