Autocomplete texts does not appear as soon as I select a list-item

[wonko-gsa]

Components Involved
Formly Autocomplete

Expected Behavior
I expect to see a list-item I selected from the autocomplete as soon as I selected.

Actual Behavior
The country/state autocomplete dropdown texts does not appear as soon as I select, but those are displayed as I focus away from those dropdown.

Your Environment
Angular Version: 17.3.7

    "@gsa-sam/components": "17.0.8",
    "@gsa-sam/layout": "17.0.10",
    "@gsa-sam/layouts": "17.0.3",
    "@gsa-sam/ngx-uswds": "17.0.1",
    "@gsa-sam/ngx-uswds-icons": "17.0.0",
    "@gsa-sam/sam-formly": "17.0.8",
    "@gsa-sam/sam-material-extensions": "17.0.8",
    "@gsa-sam/sam-styles": "3.0.18",
    "@gsa-sam/shared": "17.0.10",

Ticket Number
IAENMOD-31758

Additional context

• Formly config (Country / State) :

    {
      key: 'placeoOfPerf',
      props: { label: 'Place of Performance', group: 'accordion' },
      fieldGroup: [
        {
          key: 'country',
          id: 'country',
          type: 'autocomplete',
          props: {
            label: 'Country',
            hideOptional: true,
            configuration: this.autocompleteCountrySettings,
            model: this.autocompleteCountryModel,
            service: this.countryAutocompleteService
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              if (this.queryParams.country != null) { // Query Param country is country name here
                const qpCountryName = this.queryParams.country.trim().toUpperCase();
                const qpCountryCode = FilterHelper.getCountryCodeForName(this.route, qpCountryName);
                // eslint-disable-next-line quote-props
                field.formControl.setValue([{ 'id': qpCountryCode, 'name': qpCountryName }]);
              }
            },
            onChanges: (field: FormlyFieldConfig) => {
              field.formControl.valueChanges.subscribe(v => {
                let cc;
                if (v) {
                  if (Array.isArray(v)) {
                    if (v.length === 0) {
                      field.model['country'] = '';
                    } else {
                      field.model['country'] = v[0]['name'];
                      cc = v[0]['id'];
                    }
                  }
                } else {
                  this.autocompleteCountryModel.items = [];
                }

                this.setStateInfo(null);
                this.stateAutocompleteService.countryCode = cc;
                this.refreshStateInfo(cc);

                this.applyFilters(field);
              });
            }
          }
        },
        {
          key: 'state',
          type: 'autocomplete',
          props: {
            label: 'State / Territory',
            hideOptional: true,
            configuration: this.autocompleteStateSettings,
            model: this.autocompleteStateModel,
            service: this.stateAutocompleteService
          },
          expressions: {
            'props.label': (field: FormlyFieldConfig) => {
              const countryArr = field.form.get('country').value;
              let countryCode: string;
              if (countryArr && countryArr.length > 0) {
                countryCode = countryArr[0]['id'];
              }
              if (!countryCode || countryCode.toUpperCase() === 'USA') {
                return 'State / Territory';
              } else {
                return 'Administrative Area / Region';
              }
            },
            'model.state': (field: FormlyFieldConfig) => {
              // When there is no selected country, load the default states list.
              const countryArr = field.form.get('country').value;
              if (!countryArr || countryArr.length === 0) {
                field.props.service.countryCode = 'USA';
              }
            }
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              if (this.queryParams.state != null) {
                this.refreshStateInfo(this.queryParams.country);
              }
            },
            onChanges: (field: FormlyFieldConfig) => {
              field.formControl.valueChanges.subscribe(v => {
                if (v) {
                  if (Array.isArray(v)) {
                    if (v.length === 0) {
                      field.model['state'] = '';
                    } else {
                      field.model['state'] = v[0]['id'];
                    }
                  }
                } else {
                  this.autocompleteStateModel.items = [];
                }
                this.applyFilters(field);
              });
            }
          }
        },
        {
          key: 'city',
          id: 'city',
          type: 'input',
          props: {
            label: 'City',
            placeholder: '',
            inputType: 'text',
            hideOptional: true,
            keyup: (field, event) => {
              this.keyupEvent(field, event);
            },
            change: (field, $event) => {
              this.applyFilters(field);
            }
          },
          hooks: {
            onInit: (field: FormlyFieldConfig) => {
              if (this.queryParams.city != null) {
                field.formControl.setValue(this.queryParams.city);
              }
            },
            onChanges: (field: FormlyFieldConfig) => {
              field.formControl.valueChanges.subscribe(value => {
                this.checkFieldCleared(field.key.toString(), value);
              });
            }
          }
        }
      ],
    },

• Tested in localhost:
  

• Tested in Storybook and shows the same issue:
  https://gsa.github.io/sam-design-system/?path=/story/components-autocomplete--selection-mode
  

[yerramshilpa]

The issue is resolved in @gsa-sam/[email protected]