Expand my Community achievements bar.

SOLVED

Issue displaying saved value on Autocomplete

Avatar

Level 2

Hello,

I am using the coral autocomplete (granite/ui/components/foundation/form/autocomplete) and a custom datasource for filling the options to be displayed. I am using this on a custom component, on the author dialog.

This is the code used on the datasource.jsp for sending the options to be displayed:

List<APIOption> apiOptions = optionsService.getOptions(data, source);
if (apiOptions != null) {
   apiOptions.forEach(option -> {
   ValueMap valueMap = new ValueMapDecorator(new HashMap<>());
   valueMap.put("value", option.getValue());
   valueMap.put("text", option.getLabel());
   optionsToDisplay.add(new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", valueMap));
  });
}

request.setAttribute(DataSource.class.getName(), new SimpleDataSource(optionsToDisplay.iterator()));

This is the xml definition for the autocomplete field I am using:

<course
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/autocomplete"
   fieldLabel="Course"
   name="./course"
   forceSelection="{Boolean}true"
   mode="contains">
  <datasource
   jcr:primaryType="nt:unstructured"
   sling:resourceType="aristotle/datasources/formapioptions"
   source="mock"
   data="course"/>
  <options
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/autocomplete/list"/>
</course>

The most of it is working fine: the options are displayed correctly, the text property is displayed for the user and the value property is what is saved on the related node. But once the info is saved and I reopen the dialog for the component, the field is displayed but the value displayed as selected is the value property no the text one. Which is confusing because for the user which should be displayed always is the text property no the value, the value should be only for internal purposes.

This screenshot shows how the options are displayed correctly:

1616321_pastedImage_2.png

This screenshot shows how the text for the option selected is displayed correctly before saving the info:

1616322_pastedImage_3.png

This screenshot shows how the value property is displayed instead of the text one when the author dialog is reopened:

1616323_pastedImage_4.png

I tried using the select field and it works fine, it seems to be an issue only with the autocomplete field. I highly doubt that I am the first person seeing this issue and even more, that the correct behavior is not already implemented(find the match option and display the text property instead of the stored value).

I would appreciate any help I can receive because I already tried a lot of things and I ran out of options.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Team responded:

I am checking with the rest of the AEM team about this. It could be a bug. The same value should show up in the dialog field regardless if autocomplete is used or not

View solution in original post

15 Replies

Avatar

Level 10

When you save the value - what is the value in the property for the component under /conent/<yoursite>?

Avatar

Level 10

I am testing this too on AEM 6.4

Avatar

Level 2

The value property is saved, which in my case is the id of the object, which is the expected behavior. The problem is when author dialog is reloaded the value is displayed on the field instead of the text property which is displayed when you initially select the option from the list of options.

I am using AEM 6.4 as well

Avatar

Level 10

I am selecting the value fine from autocomplete:

Auto1.png

I select the value and its displayed in the field:

auto2.png

The value is written to the AEM page as expected:

auto3.png

When I reopen the dialog - the value remains in the dialog:

auto4.png

The value pak is used in both the dialog and the page  -- given this data source.

countries.put("in", "India");

countries.put("us", "United States");

countries.put("aus", "Australia");

countries.put("pak", "Pakistan");

countries.put("sri", "Srilanka");

So, its the key that is showing up in the field and the page.

Is this what you are seeing?

Avatar

Level 10

Interesting - when i remove the autocomplete - the value is displayed in the component dialog - not the key:

Auto5.png

Avatar

Level 10

So there is a difference. I am checking with the AEM team about this. It could be a bug. The same value should show up in the dialog field regardless if autocomplete is used or not.

Avatar

Level 2

That is exactly the problem, on the example you provided "Pak" should be always saved, but what should be displayed to the user is "Pakistan", as you saw that is the behavior if you use the select field, but it is not the case for the autocomplete.

The expected behavior is when the dialog is reloaded, the autocomplete should display "Pakistan" which was the option selected by the user. "Pak" is the value related with the option selected by the user but should not be visible for the user, only saved on AEM. That is how all the fields on web apps work.

So, for the example using the regular select, it is working fine and that behavior is what I would expect on the autocomplete field as well.

Avatar

Level 10

I have reached out to the team asking about this. I suspect this is a bug. The same behavior should exist if autocomplete is used or not used. In my example, Pakistan should be displayed.

Avatar

Level 2

Thanks, please keep me posted as soon you receive more info about this.

Thanks in advance,

Avatar

Correct answer by
Level 10

Team responded:

I am checking with the rest of the AEM team about this. It could be a bug. The same value should show up in the dialog field regardless if autocomplete is used or not

Avatar

Level 1

Hi

Do you have any update on this bug please? Is it resolved in some patch / service pack the mean time? 

Thanks

Steven

Avatar

Level 2

We are also experiencing the same issue. Has there been any headway?

Avatar

Level 2

Hello,

The AEM team confirmed it is a bug, but the did not give information about if they are going to fix it soon or something like that.

Avatar

Level 2

We ended up using the autocomplete component in the mode that allows multiple things to be selected, which seems to have fixed the issue for us.  Our final dialog element looked something like this:

<featureHighlights

    jcr:primaryType="nt:unstructured"

    sling:resourceType="/libs/granite/ui/components/coral/foundation/form/autocomplete"

    fieldLabel="Highlight Features"

    forceSelection="{Boolean}true"

    multiple="{Boolean}true"

    name="./highlightedfeatures">

<datasource

        jcr:primaryType="nt:unstructured"

        sling:resourceType="tooling/components/dropdown/source"/>

<options

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>

<values

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/tags"

        name="test1"/>

</featureHighlights>

For some reason we had to add a name to the values section or the scripts that pass your form back to the Sling POST servlet don't read the data correctly.

Avatar

Level 2

Yeah, you are right we found that solution as well, Unfortunately, it was not an option for us to allow multiple selections for that field.