onConfirm selected value is undefined on blur

[tobias-g]

When a user clicks an item in the typeahead onConfirm is called with the selected value however when the user then tabs out of the input onConfirm is called again but with undefined as the value even though the selected item has not changed.

When a user selects a value in the dropdown using tab onConfirm is called correctly with the correct value only once.

Wanted to open an issue to discuss what the expected behaviour should be before I open a PR. For me I believe when a user tabs out of the component input and the selected value hasn't changed either:

1. onConfirm shouldn't be called because user has already selected/confirmed a value or
2. onConfirm should be called with the actual current selected value not undefined

Cheers for your time 🍺

[dankmitchell]

@edwardhorsford can you provide some feedback on this please.

[edwardhorsford]

I'm not sure I fully understand the issue... might be easier to look in person?

It sounds like in either case, onConfirm shouldn't be undefined.

It may be that it confirms it again to catch the case that a user types in a complete value, therefore doesn't need to make a choice. Does that sound likely?

[tobias-g]

Hi @edwardhorsford I added a console log to the onConfirm in the examples and here's a quick gif of the issue https://imgur.com/JDYjQ42 where you can see when tabbing to the second typeahead undefined is printed to the console.

Hope that helps show whats happening more clearly.

[HughePaul]

I'm having an issue with this too: I was trying to handle a query that didn't match any options by deselecting options in the enhanced select box.

            onConfirm: function (query) {
                var requestedOption = [].filter.call(el.options, function (option) { return (option.textContent || option.innerText) === query; })[0];
                if (requestedOption) {
                    requestedOption.selected = true;
                } else {
                    el.selectedIndex = -1;
                }
            },

But once an option has been selected, the options menu is collapsed, the selected index is reverted to -1, so the blur tries to look up the selected option for the onConfirm call and gets undefined. Perhaps either the options and selection should be kept around, or the raw query should be getting returned in the onConfirm?

perhaps onConfirm could return both the selected item and the current query, so not to break any existing implementations?

[nicf82]

Also having this problem, did anyone find a work-around or has it been taken in as a bug and fixed?

[lukekarrys]

@nicf82 I was able to fix it for my use case with this commit: https://github.com/lukekarrys/accessible-autocomplete/commit/5594661282fe329b5f137f85778e3ce1049e23be This was a few years ago so I'm not sure if that still a valid fix with the latest master.

[nicf82]

Thanks @lukekarrys , will check that out

[brightpixels]

Anyone managed to find a fix for this issue?

[thomasleese]

https://github.com/DFE-Digital/apply-for-qualified-teacher-status/pull/441 is how I've got around this bug when it enhances a select element as I can compare the value from the select element with the value from the input element.