SelectZobject currently has a little unpredictable behavior.
This component will receive an input from the user, search using the wikilambda_searchlabels and present a drop-down with labels for the user to select.
Few things about this component that should be addressed:
- Remove search-text attribute if not needed. In the parent template, the component is passed a search-text attribute, but this is not declared nor treated as an input. This might have been added as a property first, but later removed from the component but not from the template. This works fine, and does not generate any error, but if not expected to come as input, the template should be kept clean.
- The search, fetch and display options, and select behaviors don't work intuitively:
- If the field is emptied, it hides search results drop-down, but doesn't clear the input from the perspective of parent component, so when erasing a value, the parent still has the last valid string that has been written.
- When while typing, it matches a valid format, it selects it and emits the input. So when searching for Z103, it selects and emits Z1, Z10 and Z103 but from Z1 onward (including), it stops searching, so the last valid search for labels is wikilambda_searchlabels&wikilambda_search=Z&wikilambda_language=en
- Instead, a more intuitive behavior could be:
- When letters are input and after a short delay, even if the format is matched, request suggested labels and display the drop down.
- Emit the value to the parent not when it's written, but when it's selected, either:
- from the drop-down, or
- directly typing in the input field, which will be considered "selected" when moving the focus out of the field
- When an empty or a non-valid value is selected, clear the field and emit a null value to the parent if a null value is selected.
Notice that there's an element that has this same behavior in the OOUI library, but it will take some time till we can use the Vue implementation of this as part of the WVUI effort.
gengh suggestion: We can keep different layers for this kind of component, a generic one that we can contribute or unplug and replace (e.g. LookupElement.vue), which contains the generic behavior, and a WikiLambda-specific implementation of this component (e.g. LabelLookupElement.vue) that instances the generic one and provides the specific Wikilambda behavior. We can look at the OOUI LookupElement to understand what is considered "generic" behavior and replicate it.