bug: Tab bar is unhidden too quickly after keyboard dismiss

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When the keyboard is dismissed the tab bar temporarily flashes on the screen as it is unhidden before the webview has expanded back to the full size of the viewport.

https://user-images.githubusercontent.com/76167627/191752633-e4068d12-a205-421b-9005-ba5194948679.mp4

Expected Behavior

The tab bar should not be unhidden until the web view has expanded back to its full size so that the tab bar does not flash in the center of the screen.

Steps to Reproduce

Use the default capacitor keyboard config:

// capacitor-config.ts
Keyboard: {
    resize: KeyboardResize.Native,
    resizeOnFullScreen: true,
},

This happens on any page with an IonTabBar.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.2.8

Capacitor:

Capacitor CLI : 4.3.0 @capacitor/android : not installed @capacitor/core : 4.3.0 @capacitor/ios : 4.3.0

Utility:

cordova-res : not installed globally native-run : 1.7.0

System:

NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.7.0 OS : macOS Monterey

Additional Information

No response

[maccman]

We just ran into this too (cc @mlynch )

[milanharia]

@aginvlad thanks for sharing. I seem to see the tab bar flash still because the tab bar is being unhidden a little too soon so I have changed the timeout delay to 100ms and seems to work consistently. The full code for anybody interested:

const App: React.FC = () => {
  const [keyboardIsOpen, setKeyboardIsOpen] = useState(false);

  useEffect(() => {
    Keyboard.addListener("keyboardWillShow", () => {
      setKeyboardIsOpen(true);
    });
    Keyboard.addListener("keyboardWillHide", () => {
      setTimeout(() => setKeyboardIsOpen(false), 100);
    });

    return () => {
      Keyboard.removeAllListeners();
    };
  }, []);

  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route exact path="/tab1">
              <Tab1 />
            </Route>
            <Route exact path="/tab2">
              <Tab2 />
            </Route>
            <Route path="/tab3">
              <Tab3 />
            </Route>
            <Route exact path="/">
              <Redirect to="/tab1" />
            </Route>
          </IonRouterOutlet>
          <IonTabBar hidden={keyboardIsOpen} slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

@liamdebeasi can you give any insight into when this issue will be resolved in production?