Option to Disable Select Item on Enter

[spikecodes]

Option to Disable Select Item on Enter

[cdalexndr]

@kraaden with this code manual select will not work, rendering autocomplete unusable. onSelect is called when user presses Enter or when he clicks an entry in the dropdown. If the user selects an entry with the arrow keys (onSelect not called) and presses enter (onSelect called), the selection will be ignored, but he clearly wants that entry to be applied.

What is needed is an option to prevent autoselect only if the user doesn't want to apply a suggestion and wants to submit raw input text.
How can you detect the user doesn't want the autocomplete applied? One example: if he doesn't press "down" and selects an entry, then he doesn't want to autocomplete. This requires that by default no entry is selected, as opposed to current behavior where the first entry is selected on initialization and an entry must always be selected.

Can you please review my PR #40?

[cdalexndr]

I'm currently using my fork with the feature enabled, until PR is approved:
npm install --save github:cdalexndr/autocomplete#disableAutoSelect_issue37

[cdalexndr]

Search engines (Google, Bing, DuckDuckGo) autocomplete doesn't automatically select the first item on Enter.
This is a required feature that users are used to.

[kraaden]

You can just extend the default functionality with typescript:

interface ExtendedSettings<T> extends AutocompleteSettings<T> {
    disableAutoSelect: boolean;
}

function autocompleteCustomized<T extends AutocompleteItem>(settings: ExtendedSettings<T>): AutocompleteResult {
    return autocomplete({
        ...settings,
        onSelect(item: T, input: HTMLInputElement) {
            if (settings.disableAutoSelect) {
                return;
            }
            settings.onSelect(item, input);
        }
    });
}

Then call it like this:

autocompleteCustomized({
    disableAutoSelect: true,
    ...
})

[hoebelix]

Any progress on this? I completely agree with @cdalexndr.

[josipmaslac]

@cdalexndr thanks for that, hope @kraaden will approve PR soon.

I need a behaviour that would prevent submit by default (ignoring preventSubmit setting) if an Enter is pressed while an item selected (which to me should be a common use case).
So I've got that by taking a code from PR #40 and changing the part from the first post in this thread by introducing a new setting preventSubmitOnSelect:

if (keyCode === 13 /* Enter */) {
    if (selected) {
        if (settings.preventSubmitOnSelect === true){
            ev.preventDefault();
        }
        settings.onSelect(selected, input);
        clear();
    } 
    if (preventSubmit) {
        ev.preventDefault();
    }
}

@kraaden if this addition makes sense to you please add it also.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.