bug: iPhone browsers do not populate filtered list

[macpawnee]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

I have an ion-list filled with ion-item which are displayed correctly. To make the list searchable I added an ion-searchbar to filter according to a given input.

Having tested the ion-searchbar on my desktop browser, I was already happy as it seemed to work out-of-the-box without complications. However, on my iPhone using Safari or Chrome, the ion-list remains blank if I enter anything into the ion-searchbar. Once I clear the ion-searchbar, the unfiltered list reappears. Edit: I tried the application in Chrome in the Android Emulator and here the filtering works fine.

Expected Behavior

I would assume the behaviour in any browser to be the same. But this approach only works for the desktop browser, not on the mobile version.

Steps to Reproduce

I have tried two options as I read that v-model might not be fully supported.

Option 1:

<ion-searchbar :debounce="100" v-model="input"></ion-searchbar>

<ion-content class="ion-padding">     
     <ion-list lines="full">
          <ion-item v-for="crew in filteredCrew()" :key="crew.id"></ion-item>
     <ion-list>
</ion-content>

    let input = ref('');

    function filteredCrew(): Array<Crew> {
      return data.value.filter((crew: Crew) =>
        (crew.firstName + crew.lastName)
          .toLocaleLowerCase()
          .includes(input.value)
      );
    }

    return {
      filteredCrew,
      input,
    };

Option 2 - only ion-searchbar differs:

<ion-searchbar :debounce="100" :value="input" @input="input = $event.target.value"></ion-searchbar>

Both options work perfectly on the Desktop Browser.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.2.3

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : 4.1.0
   @capacitor/core    : 4.1.0
   @capacitor/ios     : 4.1.0

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.0) : 1.6.0

System:

   NodeJS : v18.8.0 (/opt/homebrew/Cellar/node/18.8.0/bin/node)
   npm    : 8.18.0
   OS     : macOS Monterey

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!