Gray bar around search field and uninteractable on iOS

[Exormeter]

Hi, I have a problem with your autocomplete plugin. On iOS, I have a gray bar around the search field and the search field is almost not clickable. I can't get the courser to appear and the onscreen keyboard will only appear when I tap the search field rapidly. No problems using the searchbar in the browser, looks normal and behaves normal.

This probably not enouth informations to pindown the issue, please tell me what other information you need. Here is my html file:

<ion-header>
  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-auto-complete [dataProvider]="searchAutocompleteService" (itemSelected)="chooseCard($event)"></ion-auto-complete>
  <ion-list>
    <ion-item *ngFor="let card of cardVersions" (click)="itemSelected(card)">
      <ss-icon class="icon" name={{card.set.toLowerCase()}}></ss-icon>
      <h2 class="cardname">{{card.name}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

My Typescrip Controller:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestService } from '../../services/restService';
import { SearchAutocompleteService } from '../../services/searchAutocompleteService';
import { MTGApiSearchResult } from '../../models/cardResults/mtgApiSearchResult';
import { ShowCardPage } from '../show-card/show-card';
import { SettingsService } from '../../services/settings.service';

@Component({
  selector: 'page-search',
  templateUrl: 'search.html'
})
export class SearchPage {

  private cardVersions:Array<MTGApiSearchResult> = new Array<MTGApiSearchResult>();

  constructor(public searchAutocompleteService: SearchAutocompleteService, public navCtrl: NavController, private restService: RestService, public searchService: SettingsService) {

  }

  chooseCard(item){
    this.restService.getCardsByName(item.name).subscribe(result =>{
      this.cardVersions = result;
    });
  }

  itemSelected(card: MTGApiSearchResult){
    this.navCtrl.push(ShowCardPage, {'card': card});
  }

}

And my AutoCompleteService:

import { AutoCompleteService } from 'ionic2-auto-complete';
import { Http } from '@angular/http';
import { Injectable } from "@angular/core";
import 'rxjs/add/operator/map'

@Injectable()
export class SearchAutocompleteService implements AutoCompleteService {
  labelAttribute = "name";

  constructor(private http:Http) {

  }

  getResults(keyword:string) {
    return this.http.get("https://api.scryfall.com/cards/autocomplete?q="+keyword)
        .map( result =>{
            var cardNames = result.json().data;
            var cardNamesObjects =[];
            for(var i = 0; i < cardNames.length; i++){
                cardNamesObjects.push({name: cardNames[i]});
            }
            return cardNamesObjects;
        });
    }
}

Here are informations about my cordova ionic installation:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0

System:

Node  : v8.9.1
npm   : 5.5.1 
OS    : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro
iOS: 10.1.1

[kadoshms]

Hey @Exormeter , thanks for using this plugin. What happens when you use the regular ion-searchbar, do you experience the same issue?

[Exormeter]

I tested a plain ion-searchbar, it looks the same as the autocomplete bar, but if I click on it the keyboard and cursor appear instantly.

EDIT: The gray boarder is a iOS styling thing, so has nothing to do with the issue at hand.

[Exormeter]

Update: Installing version 1.4.0 instead of 1.53 and removing the value field from the template seems to work, at least in the emulaor. Haven't tested it on the device yet.

Leaving the value field in gives me a runtime error, apparently because ion-searchbar doesn't have that field. (deprecated?)

Can you tell me what the difference between the tow versions is and that the value field was for?

[kadoshms]

@Exormeter well, this is something I need to investigate

[Yogeshjuya1993]

@kadoshms I can confirm that this issue is there in version 1.5.3-beta on iOS. Tapping on search bar doesn't opens up keyboard, one needs to long press on search bar for it to show up. However it seems to be working fine on Android.

[kadoshms]

fixed in #6a86c506841c731e409edceeec19fb5ed4a1e484

Published in 1.6.1-alpha