Typeahead from ExtensibleForm not Filling With Patched Value

[erdemcaygor]

Description

Typeahead input in abp-extensible-form is not updating properly when a patched value is applied through patchValue() or form initialization.

Reproduction Steps

• Initialize a form with abp-extensible-form, including a Typeahead field.
• Observe that the Typeahead input remains empty during the data update process

Expected behavior

• The Typeahead field should display the patched value as soon as the data is updated.

Actual behavior

• The Typeahead input stays empty while the data is updating

[davidsi02]

Hi, are there any recent developments or updates regarding this issue?

[erdemcaygor]

Hello,

If you are using a Typeahead-typed field in your form, you also need to add another field with the same name but with the suffix _Text to store the selected key from the Typeahead field. This field is automatically populated when the Typeahead selection changes.

Here’s an example usage:

  {
    type: ePropType.Typeahead,
    name: 'state',
    displayName: '::State',
    id: 'state',
    options: data => {
      return of([
        {
          key: 'Active',
          value: 'active',
        },
        {
          key: 'Passive',
          value: 'passive',
        },
      ]);
    },
  },
  {
    type: ePropType.String,
    name: 'state_Text',
    displayName: '::State',
    id: 'state_Text',
    visible: data => false,  // Hidden field to store the selected key
  }

[davidsi02]

Thanks for the tip. Is this a work-around or a definitive solution? Can it be used right away or will it only be available in a future patch? I tested it on my project and it still didn't work

[erdemcaygor]

Hello, Yes, you can use it right away, and this is the definitive solution. Could you please share your form props, the save request body, and the detailed response body?

[davidsi02]

Hello,

Again, thanks for the help provided

export const DEFAULT_DOOR_CREATE_FORM_PROPS = FormProp.createMany<DoorDto>([
  {
    type: ePropType.String,
    name: 'code',
    displayName: 'AccessControlService::Code',
    id: 'door-code',
    disabled: data => {
      return data?.record?.id ? true : false;
    },
    validators: () => [Validators.required],
  },
  {
    type: ePropType.String,
    name: 'name',
    displayName: 'AccessControlService::Name',
    id: 'door-name',
    validators: () => [Validators.required],
  },
  {
    type: ePropType.Typeahead,
    name: 'organizationUnitId',
    id: 'organizationUnitId',
    displayName: '::AreaEnter',
    validators: () => [Validators.required],
    options: (data, params) => {
      const service = data.getInjected(OrganizationUnitService);
      return service
        .getList({
          filter: params ?? '',
          type: OrganizationUnitType.Area,
          maxResultCount: params?.maxResultCount,
          skipCount: params?.skipCount,
        } as GetOrganizationUnitInput)
        .pipe(
          map(pagedResult => {
            return pagedResult.items.map(item => ({
              key: item.displayName,
              value: item.id,
            }));
          })
        );
    },
  },
  {
    type: ePropType.String,
    name: 'organizationUnitId_Text',
    displayName: ':::AreaEnter',
    id: 'organizationUnitId_Text',
    visible: data => false, // Hidden field to store the selected key
  },
]);

export const DEFAULT_DOOR_EDIT_FORM_PROPS = DEFAULT_DOOR_CREATE_FORM_PROPS;

Request payload:

{
    "name": "Porta Principal",
    "direction": 2,
    "extraProperties": {},
    "organizationUnitId": "3a1891f1-5aff-d7f0-4794-853bc26c4ea4",
    "organizationUnitId_Text": "Organization Unit A"
}

Response:

{
    "code": "01",
    "name": "Porta Principal",
    "organizationUnitId": "3a1891f1-5aff-d7f0-4794-853bc26c4ea4",
    "organizationUnit": {
        "displayName": "Organization Unit A",
        "identifier": "OUA",
        "code": "00001.00003.00008.00001",
        "type": 3,
        "isDeleted": false,
        "deleterId": null,
        "deletionTime": null,
        "lastModificationTime": "2025-03-20T10:20:52.5924713Z",
        "lastModifierId": "3a1891f1-5fd0-4e1d-e02a-d46822b73fd0",
        "creationTime": "2025-03-10T11:15:39.917992Z",
        "creatorId": null,
        "id": "3a1891f1-5aff-d7f0-4794-853bc26c4ea4",
        "extraProperties": {}
    }
}

[erdemcaygor]

Hello

The issue is that your response does not include the organizationUnitId_Text field, which is required for the Typeahead field to work correctly.

Could you please add the organizationUnitId_Text field to your response?

[davidsi02]

While the solution functions, it appears to introduce unnecessary complexity compared to the streamlined behavior of the abp-lookup-typeahead component. Optimizing this implementation to achieve similar efficiency and simplicity is desirable