Issue displaying saved value on Autocomplete | Community
Skip to main content
josuev40522873
Level 2
November 7, 2018
Solved

Issue displaying saved value on Autocomplete

  • November 7, 2018
  • 14 replies
  • 9277 views

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:

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

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

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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

14 replies

Level 2
December 14, 2018

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

josuev40522873
Level 2
December 17, 2018

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.

Level 2
December 17, 2018

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.

josuev40522873
Level 2
December 17, 2018

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.