bug: Tab bar is unhidden too quickly after keyboard dismiss

[milanharia]

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.

Simulator.Screen.Recording.-.iPhone.14.-.2022-09-22.at.13.55.17.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 )

[vojto]

Looks like this started in 6.2.3. Works well in 6.2.2. Could be related to #25746

[BinDohry]

@liamdebeasi Any info on when this fix will be merged into production? Thanks!

[vojto]

Still breaking in 6.3.8.

[aginvlad]

Same for me in 6.3.9
I temporarily fixed it with Capacitor Keyboard

useEffect(() => {
  Keyboard.addListener('keyboardWillShow', () => setKeyboardShown(true));
  Keyboard.addListener('keyboardWillHide', () =>
    setTimeout(() => {
      setKeyboardShown(false);
    }, 10)
  );

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

And then provided keyboardShown variable to IonTabBar hidden prop

[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?

[vojto]

Still breaking in 6.3.8.

No improvement in 6.4.2.

[vojto]

Just upgraded to Ionic 7.0.0, and not seeing any improvement.

Can we get some feedback on this please?

I guess we'll have to use some hack, we're currently stuck on Ionic 6.2.2.

[maccman]

@mlynch this one seems worth looking at :)

[mlynch]

@maccman talked to the team and it's currently being looked at. Hope to have an update soon