diff --git a/modules/pages-and-forms/pages/widgets-inputs.adoc b/modules/pages-and-forms/pages/widgets-inputs.adoc index b301cceb69..3a38c7f3d3 100644 --- a/modules/pages-and-forms/pages/widgets-inputs.adoc +++ b/modules/pages-and-forms/pages/widgets-inputs.adoc @@ -45,6 +45,8 @@ image::widgets/autocomplete.png[autocomplete] Use an autocomplete widget to offer the user a list of possible values based on data entered in the field. For example, in a firstName field, if the user types _chri_, the values _chris_, _christine_, _christian_, _christiane_ are proposed. The user selects the correct value. To define the *available values*, bind a data source to initialize the suggestions. For suggestions that are an array of objects, you can specify a *displayed key* to identify the attribute to show as a suggestion in the widget. The value must be bound to a variable that will hold the selected suggestion. +See xref:ROOT:widgets.adoc#troubleshooting-ui-designer-widgets[Troubleshooting UI Designer widgets] to solve common issues with this widget. + === Select widget image::widgets/select.png[select] diff --git a/modules/pages-and-forms/pages/widgets.adoc b/modules/pages-and-forms/pages/widgets.adoc index e044bb49e1..7b66ccc401 100644 --- a/modules/pages-and-forms/pages/widgets.adoc +++ b/modules/pages-and-forms/pages/widgets.adoc @@ -42,6 +42,8 @@ Limitations: * The URL should have the file type as extension (e.g. \https://myhost/doc/sample.pdf) ==== +See <> to solve common issues with this widget. + [#rich-text-area] == Rich Text Area widget @@ -96,13 +98,11 @@ When the switch is completed, you still may have to set properties from the prop Switch feature not available for Internet Explorer 11 and Microsoft Edge. ==== +[#troubleshooting-ui-designer-widgets] [.troubleshooting-title] == Troubleshooting UI Designer widgets -[.troubleshooting-title] -=== Troubleshooting File Viewer - [.troubleshooting-section] -- [.symptom] @@ -117,3 +117,33 @@ The URL points on a file without extension (e.g. \https://myhost/doc/sample) [.solution]#Possible solution# Make a custom widget from the File Viewer widget, and adapt the `controller.isPDF` or `controller.isImage`. -- + +[.troubleshooting-section] +-- +[.symptom] +Autocomplete widget does not update its displayed value + +[.symptom-description] +Autocomplete widget does not update its displayed value when the value is changed by a variable. + +[.solution]#Possible solution# +Make a custom widget from the Autocomplete widget, and update the controller by replacing the function that set the `formatLabel` as follows: + +[source,javascript] +---- + this.formatLabel = function ($model) { + if (this.selectedItem) { + let sel = this.selectedItem; + this.selectedItem = undefined; + return this.getLabel(sel); + } else { + if (typeof $model === 'object') { + return this.getLabel($model); + } else { + return $model; + } + } + }; +---- +-- +