CODEWITHSUNDEEP
javascriptcordovaionic-frameworkionic4
munzld
munzld

Reputation: 279

Ionic InAppBrowser Focus Stays Behind on iOS

Problem
I have a page I'm opening using Ionic4's InAppBrowser. The browser opens fine, but the focus stays on the previous screen.

This is a problem for user's with disabilities because they can't navigate the opened browser using accessibility tools like Voiceover. When they swipe, it just swipes on elements behind the opened browser. The problem seems isolated to iOS (Android Talkback correctly focuses into the in app browser).

What I've Tried
So far I have tried subscribing to the 'loadstop' event and executing Javascript to focus on an ID in the browser:

package.json

"ionic": "4.7.1",
"@ionic-native/in-app-browser": "^5.0.0"

Navigation Click Directive
Some of my inspiration for this directive came from the top SO answer here.

import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';

...

defaultOptions_ios: InAppBrowserOptions = {
    footer: 'yes',
    location: 'no',
    enableViewportScale: 'yes',
    closebuttoncaption: 'Close',
    transitionstyle: 'fliphorizontal',
    usewkwebview: 'yes',
    hideurlbar: 'yes',
    hidenavigationbuttons: 'yes',
    footercolor: '#000000',
    toolbarcolor: '#000000',
    closebuttoncolor: '#ffffff',
    lefttoright: 'no'
};

constructor(
    private inAppBrowser: InAppBrowser) {
}

openBrowser(url) {
    let inAppBrowserRef = this.inAppBrowser.create(url, '_blank', defaultOptions_ios);
    
    inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
        inAppBrowserRef.executeScript({code: `
          const elementId = document.querySelector('id');
          if(elementId) {
            elementId.focus();
          }
        `});
      });
}

However, the focus still remains on the previous screen. I'm looking for another possible solution to bring the focus onto the in app browser on iOS.

Upvotes: 1

Views: 521

Answers (2)

munzld
munzld

Reputation: 279

What I ended up having to do to get the focus into the Ionic inapp browser was apply a tabindex to the element I was focusing on.

inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
    inAppBrowserRef.executeScript({code: `
      const elementId = document.querySelector('id');
      if(elementId) {
        elementId.setAttribute('tabindex', '-1');
        elementId.focus();
      }
    `});
  });

It didn't have one, and I found out it needs one in order to focus on it. After I did that, it worked as expected.

Upvotes: 1

Shinichi Kudo
Shinichi Kudo

Reputation: 344

Try this :

openBrowser(url) {
    let inAppBrowserRef = this.inAppBrowser.create(url, '_blank', defaultOptions_ios);
    
    inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
        inAppBrowserRef.executeScript({code: `
          const elementId = document.querySelector('id');
          if(elementId) {
            elementId.focus();
            elementId.blur();
          }
        `});
      });
}

Or try with this, implement it in app.component.ts :

      window.addEventListener('loadstart', (e) => {
        const elementFocused: any = document.querySelector('id');
        if (elementFocused) {
          elementFocused.blur();
          elementFocused.focus();
        }
      });

Upvotes: 1

Related Questions