The Wayback Machine - https://web.archive.org/web/20210628142741/https://github.com/ionic-team/ionic-framework/issues/22631
Skip to content

/ ionic-framework

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: ion-page turning invisible when changing its css class to any value #22631

Closed
larsblumberg opened this issue Dec 7, 2020 · 2 comments
Closed

bug: ion-page turning invisible when changing its css class to any value #22631

larsblumberg opened this issue Dec 7, 2020 · 2 comments
Labels
package: react type: bug

Comments

@larsblumberg
Copy link

@larsblumberg larsblumberg commented Dec 7, 2020 •
edited

Bug Report

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

Current behavior:
When changing the css class of ion-page to any value, ionic adds ion-page-invisible which renders the page invisible.

Expected behavior:
ion-page-invisible should not be added to list of style classes when changing a page's classes.

Steps to reproduce:

  1. Set up a page inside IonReactRouter
  2. Assign any class value to an ion-page's style/classes attribute and display the page
  3. Change the class attribute dynamically, i.e via button press

Related code:

https://github.com/larsblumberg/ionic-invisible-page

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" component={Page} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

const Page: React.FC = () => {
  const [styleClass, setStyleClass] = useState('initial-class')
  return (
    <IonPage className={styleClass}>
      <IonContent>
        <IonButton onClick={() => setStyleClass('other-class')}>Add Class</IonButton>
      </IonContent>
    </IonPage>
  );
};

Other information:

Bug doesn't manifest if page is used outside (without) IonReactRouter.

Ionic info:

Ionic:

   Ionic CLI       : 6.12.1 (/Users/lars/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.5.1

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

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

System:

   NodeJS : v15.2.1 (/usr/local/Cellar/node/15.2.1/bin/node)
   npm    : 7.0.10
   OS     : macOS Catalina
@ionitron-bot ionitron-bot bot added the triage label Dec 7, 2020
@ionitron-bot ionitron-bot bot removed the triage label Dec 7, 2020
elylucas added a commit that referenced this issue Dec 11, 2020
@elylucas
fix(react): adding a dynamic class to an ion-page no longer hides the…
Loading status checks…
a911c99 
… page, resolves #22631
@elylucas elylucas mentioned this issue Dec 11, 2020
Merged
13 tasks
@liamdebeasi
Copy link
Member

@liamdebeasi liamdebeasi commented Dec 15, 2020

Thanks for the issue. This has been resolved via #22666, and a fix will be available in an upcoming release of Ionic Framework.
liamdebeasi pushed a commit that referenced this issue Dec 15, 2020
@elylucas
fix(react): adding dynamic class to ion-page no longer hides component (
Verified
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: 4AEE18F83AFDEB23 Learn about vigilant mode.
Loading status checks…
a01bdb8 
#22666)

resolves #22631
@ionitron-bot
Copy link

@ionitron-bot ionitron-bot bot commented Jan 14, 2021

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.
@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jan 14, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: react type: bug
2 participants
@liamdebeasi @larsblumberg