How to set ion-searchbar to disabled

Ionic Framework ionic-v3
1

Title says it all.

I have a searchbar…

<ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

But want to make it disabled based on a condition.

I have already tried

[disabled]="this.advancedSearchOpen"

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.2.1
Xcode version: Not installed

2

Surely this is simple to do…

Does nobody have a solution?

3

I used [disabled]=disabled in ion-searchbar, and it worked correctly before last update. May be it was a glitch that it worked 'cause it hasnt an attribute “disabled”.
Finally, I made new component that extends Searchbar with one new property - disabled. Realization can be taked from ion-input component. Works fine.

4

Thanks, seems like it should have an attribute for disabled.

5

Did you find a way to disable an ion-searchbar ? Can’t believe this is not possible…

6

I haven’t been active with ionic for a while so there may be an update addressing it but to answer your question I did not find a solution.

7

I think this is a bug. Searchbars do indeed have a disabled attribute, and binding to it works, in the sense that it does flip from true to false. The problem seems to be that the searchbar component itself isn’t caring.

8

have u found solution for this ??

9

Any updates on this?

[disabled]="blockUI"

not work for me.

10

Any news on this? I’m also having this issue.

11

Me too!. Have used [disabled] on buttons… So why not searchbar… I know it’s a composite with things like the x to clear…

37
Screen Shot 2017-10-23 at 18.27.37.png1386×560 140 KB

12

i use “fieldset”

fieldset disabled=true style=“border : none”

<ion-searchbar *ngIf="disabled == false" #searchbarElem type="text" placeholder="{{guidance | translate}}"  (ionInput)="search($event)" 
    (ionClear)="search($event)" [(ngModel)]="suggestTerm">
</ion-searchbar>

fieldset

13 
constructor(
        private renderer:Renderer) {

    }

    ngOnInit() {
        let input = this.searchBar.getElementRef().nativeElement.querySelector('input');
        this.renderer.setElementAttribute(input, 'disabled', 'true');
    }

Have fun

1 Like
14

@mica great solution but getting error,

RROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
    at CampusMapPage.webpackJsonp.442.CampusMapPage.ngOnInit

<ion-searchbar #searchBar placeholder=“Search for a Destination”>

ngOnInit() {
let input = this.searchBar.nativeElement.querySelector(‘input’);
this.renderer.setElementAttribute(input, ‘disabled’, ‘true’);
this.platform.ready().then(() => {
this._init();
});
}

ERROR :interrobang:

15

By me it always set disabled to true independent of the value given (‘true’ or ‘false’).
But when I replaced setElementAttribute with setElementProperty and used a boolean value as a parameter, it worked in both cases, disabled (true) and enabled (false).