IOS bug when selecting an item from suggestion list

Affected Projects

React

Library Version: x.y.z

"version": "3.18.0",

Describe the bug

Selecting an item from the suggestion list on a IOS devices such as an iPad/iPhone almost never works (9/10 times). It seems like the

element is not entirely selectable, except when selecting the element, however, not even this works all the time. Sometimes when I try to select te highlighted word it simply closes the list but does not continue to the next page.

From what I can figure is that when selecting an item from the suggestion list "onValueSelected" is rarely running. But, when it does it continues to the page while having a 'cause' or 'source (I can't recall which one it was) which is undefined.

The code base uses the onChange event handler in order to update the value, however, I've noticed that the onSelect would be a viable option as well in the Downshift library. Perhaps, with the JS code base on IOS devices uses a strict mode that it ain't a 100% valid event to handle this action.

To Reproduce

Steps to reproduce the behavior:

import { DataSearch } from '@appbaseio/reactivesearch';
import { SEARCH_FIELDS, FIELD_WEIGHTS } from '../../config/defaults';

const SearchFieldGlobal = () => {
    return (
        <DataSearch
            componentId="q"
            autosuggest={ true }
            dataField={ SEARCH_FIELDS }
            fieldWeights={ FIELD_WEIGHTS }
            debounce={ 100 }
            fuzziness={ 2 }
            highlight={ false }
            type="search"
            URLParams={ false }
            className="searchfield-global"
            innerClass={ {
                input: 'searchbar__input',
            } }
            onValueSelected={ ( value, cause, source ) => {
                if ( 'ENTER_PRESS' === cause ) {
                    document.location.href = `/search?q="${ value }"`;
                }

                if ( 'SEARCH_ICON_CLICK' === cause ) {
                    document.location.href = `/search?q="${ value }"`;
                }

                if ( 'SUGGESTION_SELECT' === cause ) {
                    document.location.href = source.permalink;
                }
            } }
            placeholder="Typ om te zoeken..."
            parseSuggestion={ ( suggestion ) => {
                return {
                    label: suggestion.source.post_title,
                    source: suggestion.source,
                };
            } }
            showIcon={ true }
            iconPosition={ 'right' }
            icon={ <i className="fal fa-search h5" aria-hidden="true"></i> }
        />
    );
};
export default SearchFieldGlobal;

Expected behavior

same as desktop/android devices to go straight to the right page when selecting the item

Smartphone (please complete the following information):

Device: iPhone X
OS: IOS 14.6
Browser safari

appbaseio / reactivesearch

IOS bug when selecting an item from suggestion list #1706