Overwrite current value when typing in ComboBox text box?

[ajmiam]

This is a minor convenience/usability difference I noticed between react-select and the iTwinUI-react ComboBox component.

In a react-select with the isSearchable prop set to true, if an item is already selected and the user wants to type in the box to search for a different item, they can simply click in the box and the cursor goes to the left of the box, and when they type any text, it overwrites the current value. In iTwinUI-react ComboBox, however, the current value stays in the box so they have to backspace it out before entering a new search term from scratch. Would it be possible to make the searching behave like the react-select search and automatically overwrite the selected value's text in the text box?

react-select-searching-vs-combobox.mp4

Also: possibly an issue, but one thing I noticed is that setting inputProps.onFocus seems to prevent the list from popping open when the box is clicked; instead, I have to type something into the box to make the list appear. (My idea for a workaround was to select all of the text in the text box on focus so that the key the user presses would overwrite the text already in there, e.g. passing the following method as the value of inputProps.onFocus:

private clearBoxOnFocus = (event: FocusEvent) => {
        var target = event.target as HTMLInputElement;
        target.select();
    }

)

[veekeys]

Hey @ajmiam,

Sorry for the late reply.
Are you sure onFocus handling does not work? I have tried locally, and seems it works fine. Here user also verified it does work
#714

Could you create a code sandbox in case it does not work please?