Manually Fire on Change event after setting Input value for Combobox

[rubber-duck-software]

Currently, the combobox programmatically sets the input value but it is difficult to detect when this happens because no event is fired. It would be useful if we manually fired a "change" event when the input is set so that users can react appropriately

[peteruithoven]

Doesn't the Combobox.Input's onChange do that?
I did find a related issue, when clicking the Combobox.Button, the Combobox is opened and the Input's value is reset. This change isn't communicated. Even when the input field remains whether the Combobox is open or not.

My solution to prevent the Combobox from clearing the input was to control the value of Combobox.Input. By using useState, passing that to it's value and updating that state from the onChange.

Only problem is, I can't easily take an action when the Combobox is opened like clearing the input. There is no event for that. And the open variable isn't usable outside of the Combobox.

[aloifolia]

onChange is triggered when the user directly changes the input value. It is not triggered when the user selects a value from the dropdown list or when the combobox resets the input value because the user aborts the selection process (by pressing ESC or clicking outside the dropdown menu).

I wanted to track the current input value, as well. This is what I did (not sure if there is a simpler solution at the moment):

1. add event handlers for blur and keydown events

<ComboboxInput
   @keydown="onChangeInput($event.target as any)"
   @blur="onChangeInput($event.target as any)"
   ...
/>

2. store the current value in a ref

const comboboxInputValue = ref<string>();

async function onChangeInput(element: HTMLInputElement): Promise<void> {
  // timeout needed because the blur event is fired before the value change is finished
  setTimeout(() => {
    comboboxInputValue.value = element.value;
  }, 100);
}

This way I am now able to detect whether the currently visible string in the input element corresponds to the text of the currently selected item. I use this to change the appearance of the input text:

<ComboboxInput
  ...
  :display-value="selectedValue => printSelectedValue(selectedValue)"
  class="text-gray-500"
  :class={'text-gray-800': comboboxInputValue === printSelectedValue(selectedValue)}
/>

So, after the user selects an option, the input text is displayed in a darker gray to indicate that the input shows the current selection, not just some search string. As soon as the user edits the input text, the color changes back to a lighter gray.

Of course it would be nice if I did not have to observe the current input value manually. I'm not sure if my approach is fail-safe. So yeah, some out-of-the-box solution would be a nice improvement.