Bug and quick fix for database join element auto complete

JTe

New Member
Today I faced a bug (or a feature) with the database join element auto complete fields. When in a form and editing an existing record one of auto complete fields on the same record was unintentionally cleared. I found out it happened when clicking the auto complete text box and after that an another text box.

This was clearly caused by the blur event handler. By looking it more deeply it looks like the logic behind it is:
If the user selects an auto complete label from the drop down list the appropriate value is set as the element value. If there is no selection the value of the element (this.element.value) is set to an empty string ('').
I think it would be more logical to have the element behave as follows:
1) A user clicks the text field -> No changes to the value
2) A user writes random input on the auto complete text field -> No changes to the value
3) A user selects an autocomplete input form the drop down list -> The value of the new selection is used
4) A user clears the text filed -> The value is reset to an empty string
This should work as there is always an existing value on the element (either empty or something else).
To reset the auto complete element value only when the user clears the text field we need to check if the text field is empty or has only white space. We can use trim() to do that for us.

So we need to patch the file:
Code:
media/com_fabrik/js/autocomplete-bootstrap.js
With the following patch:
JavaScript:
--- autocomplete-bootstrap.js.orig   2020-10-22 11:33:21.445375696
+++ autocomplete-bootstrap.js   2021-05-27 21:34:53.019792096
@@ -81,7 +81,9 @@
                         if (!this.matchedResult) {
                             if (typeof(this.data) === 'undefined' ||
                                 !(this.data.length === 1 && this.options.autoLoadSingleResult)) {
+                                if (!this.options.labelelement.value.trim()) {
                                    this.element.value = '';
+                                }
                             }
                         }
                     }
And then either minimise the file and move it to the directory:
Code:
media/com_fabrik/js/dist
Or create a symbolic link to our file from that same directory.

I will add this later on the Github pull requests.
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top