Detached Mode History selection scrolls down to the bottom on iOS devices

[deresatom]

Description

This one might be related to #591 because it tries to scroll into a miscalculated position? Not sure about that though.

By selecting a element from the History section on the detached panel (createLocalStorageRecentSearchesPlugin) it will scroll to the bottom of the page on some iOS devices.

iOS 14.5.1 seems to be having this issue, older versions like 14.4 worked for some of my users, but it scrolled down for others.

It works perfectly on:

• Android devices
• Windows 10
• Safari desktop

Note: it also works by selecting an autocomplete value which is NOT from the history. So only the History plugin bugs it somehow.

Reproduction

Steps

1. Go to codesandbox on an iOS device
2. Open search input
3. select an item from History

scrollbug.mp4

Video shows: starting: top of the screen, after clicking the history value, it jumps down to the bottom.

Expected behavior

Keep the current state and don't scroll down.

Environment

• OS: iOS 14.5.1 / multiple iOS devices
• Browser: Safari / Chrome
• Autocomplete version: 1.0.1

Update: new codesandbox for easier debugging

[darylsew]

I'm also having this issue, what is the current recommended fix?

[aymeric-giraudet]

Hi @darylsew,

I can't seem to reproduce it on iOS 16.5.1, which version are you using ?

[darylsew]

iOS 16.5.1 - happens on my iphone and all my users iphones. Does not happen on the emulator, needs to be on physical device. Happens in all browsers with detached mode. You're testing on the physical device with this version?
this is how I'm importing the library:

<script src="//cdn.jsdelivr.net/g/algoliasearch,algoliasearch.helper"></script>
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
/>

[darylsew]

I was just able to trigger it in the sandbox link above on my ios device. You have to try searching a few times, it doesn't always trigger. It's not even necessarily related to history, it just happens when clicking on any autocomplete dropdown items. It does seem to happen everytime when I click on the history items though.

[aymeric-giraudet]

Hi @darylsew ,

It does happen for me on the CodeSandbox preview on my iPhone 13 but does not on https://kd7bg.csb.app/

I'll check tomorrow if it does on localhost, in the meantime can you confirm it doesn't work on the link above ?

[darylsew]

On your new link it doesn't repro. How can I get my codebase to update to that version?

[darylsew]

Wanted to follow up on this

[Haroenv]

The code for that sandbox is here: http://codesandbox.io/s/kd7bg

[darylsew]

What do I do if I'm not using tsx? I have a vanilla js setup

[Haroenv]

that doesn't change anything, you can strip out the typescript parts @darylsew

[darylsew]

    <script src="env.ts"></script>
    <script src="app.tsx"></script>

I don't see how I would include these files? Including them just gives me an error.

Is there a way to get the following import style to work:

<script src="//cdn.jsdelivr.net/g/algoliasearch,algoliasearch.helper"></script>
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
/>

[darylsew]

Anyhow I tweaked my imports to import a later version so the import versions match up with the sandbox. Unfortunately the issue is still occurring.

<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@4.19.1/dist/algoliasearch.umd.js"
  integrity="sha256-kQlgGuOm0EkEyVLxfQslmOI9ncN5cjv4aqyFLLphuRk="
  crossorigin="anonymous"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
/>

I played around with the sandbox you provided. So I'm unable to reproduce the issue on the deployed site at https://kd7bg.csb.app/ however, if i click "open sandbox" on that site, and then use the app within the sandbox html code, I can reproduce it. I'm not sure why that is, but I think that means the issue is not fixed. Please try it.