bug:

[henkkelder]

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: When using voice over on IOS on a ion-searchbar the reset button is unusable. When the X is being selected the upper half of the complete input is selected, but it is hardly posible to select that. Even for a person that can see.

Expected behavior: Selecting the reset X should select the X itself.

Steps to reproduce: Create a simple ionic / angular app with a searchbar and run it on an ipad. Related code:

See the 'Opwekkingsliederen' app in the App Store. Select 'Aankopen' (purchases) from the menu and select 'de gratis teksten' (free songlyrics). Use the button 'haal op' to download and install the songs. Then goto to the main page. Activate the voice over on the ipad and go back to the app. Press the search icon type some letters and try to use the reset X.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.14.1 (C:\Users\hkelder\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.12
   @angular-devkit/schematics    : 11.2.12
   @angular/cli                  : 11.2.12
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 9.0.0, browser
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 3.0.0, (and 20 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\hkelder\AppData\Local\Android\Sdk)
   NodeJS            : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.8
   OS                : Windows 10

[liamdebeasi]

Thanks for the issue. By default, the clear button hides whenever the searchbar loses focus; however, you can customize this behavior by setting showClearButton="always". This will result in the clear button always being shown if there is text in the input, regardless of focus state.

Can you give that property a try and let me know if it resolves the issue?

<ion-searchbar showClearButton="always"></ion-searchbar>

edit: If it does help, it might make sense to update the default showClearButton behavior to always in Framework v6. It's pretty hard to use the clear button with VoiceOver on without it as you mentioned.

[henkkelder]

Wow I did not expect this to solve the problem but it does. See the attached image. After selecting the clearbutton the focus stays and the button is selectable again. Thank you!

[liamdebeasi]

Great, I am glad this fixes the issue. I think it makes sense for us to update the default behavior for showClearButton to always for Framework v6. I am going to close this since the original issue is resolved, but I will talk with the team about updating the default for Framework v6. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.