Custom ui5 input webcomponent suggestions

[kostadin-kar]

Is your feature request related to a problem? Please describe.
We have an interesting use case for the ui5 input webcomponent, specifically the provided suggestions. When we type text, there is a pattern recogniser for certain placeholders. When you enter the placeholder, the suggestions start appearing. The placeholder is segregated into a few different segments, denoting a path. We would like to have different suggestions to pop up when a new segment is reached in the entered path. It is very important that scrolling through or selecting a provided suggestion does not clear or replace the entire input, but only the part that follows

Describe the solution you'd like
If there is a way to prevent the entire entered input from being replaced when selecting a suggestion would be great (e.g. insertion mechanism).

Describe alternatives you've considered
We have considered applying monkey patches to the underlying component code, so as to achieve the desired behaviour. Here are some images

Additional context
Expected behaviour should follow these images:

[ilhan007]

Hello @kostadin-kar

we have just merged a change within the Input, that allows third party components, extending ones, to control how the value should change upon suggestion preview. For the purpose, we added a new method "Input.prototype.updateValueOnPreview", that can be overwritten. Here is the method:

/**
 * Updates the input value on item preview.
 * @param {itemValue} itemValue The value of the item that is on preview
*/
updateValueOnPreview(itemValue) {
  this.value = itemValue; // here the extending component may overwrite the behaviour
}

Basically, the method is called whenever the user navigates through the items with the arrow keys and replaces the entire text in the input field with the text of the suggestion on preview. For your use case, by overwriting this method, you can control how the value should change, instead of replacing the entire text, you can replace just part of it, to add on, etc.
You have the current value (this.value) and you have the value of the suggestion as a parameter (itemValue) and it is up to you how to update the value of the Input (this.value).

import Input from "@ui5/webcomponents/dist/Input.js";

const metadata = {
  tag: "ui5-custom-input",
}

class MyCustomInput extends Input {

  static get metadata() {
    return metadata;
  }

  /**
   * Updates the input value on item preview.
   * @param {itemValue} itemValue The value of the item that is on preview
   * @overridden
  */
  updateValueOnPreview(itemValue) {
     // this.value = fn(this.value, itemValue); the new value is kind of function of the currentValue and the itemValue
  }
}

MyCustomInput.define();

export default MyCustomInput; // import this and use "ui5-custom-input" in your app