docs: Autocomplete widget does not update its displayed value (#2946)

Covers [UID-733](https://bonitasoft.atlassian.net/browse/UID-733)

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]

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 <<troubleshooting-ui-designer-widgets>> 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;
+      }
+    }
+  };
+----
+--
+