Hey everyone I came across an issue while writing a unit test. For some reason click event is fired even when IonButton is disabled.

Ion Button

it('should be clickable when not disabled', async () => {
 const triggerSubmit = vi.fn();
const screen = render(
  <IonButton data-testid="auth-reset-btn" disabled={true} onClick={triggerSubmit}></IonButton>
);
const btn = screen.getByTestId('auth-reset-btn');
expect(btn).toBeTruthy();
fireEvent.click(btn);
expect(triggerSubmit).toHaveBeenCalledTimes(0);

});

JSX Button

However for a jsx button event isnt fired which is the expected behaviour.

​

  it('test', async () => {
const triggerSubmit = vi.fn();
const screen = render(<button data-testid="auth-reset-btn" disabled={true} onClick={triggerSubmit}></button>);
const btn = screen.getByTestId('auth-reset-btn');
fireEvent.click(btn);
expect(triggerSubmit).toHaveBeenCalledTimes(0);
});

1 post - 1 participant

Read full topic

When I try to open any attachment, I temporarily write it to cache.

However I get an error “Unable to save” on this iphone 8 (IOS16).

public async viewFile(filename: string, fileData: ArrayBuffer, mimeType: string): Promise<void> {
        let fileUrl: string = await this.writeFileToCache(filename, UtilClass.getFileDataAsBase64(mimeType, fileData));
        if ((fileUrl || "").length > 0) {
            await FileOpener.openFile({path: fileUrl, mimeType: mimeType}).catch(async (e) => {
                if (e.message.startsWith("File cannot be opened.")) {
                    let alert: HTMLIonAlertElement = await this.alertController.create({
                        cssClass: "fp-alert",```

public async writeFileToCache(fileName: string, fileData: string): Promise<string> {
    const savedFile: WriteFileResult = await Filesystem.writeFile({
        path: `${fileName}`,
        data: fileData,
        directory: Directory.Cache
    });
    return savedFile.uri
}

1 post - 1 participant

Read full topic

Hey everyone,

You know this kind of bouncing effect happening when you scroll up or down at extremities? Well I get this effect on the web version, but when I use the app in iOS simulator or even with TestFlight, I don’t have this effect. This is resulting in the app feeling a bit buggy as I think we all expect this bouncing effect to happen.

I’m using Vue JS but I’m not using the Ionic framework for the page structure.

I am using Capacitor to build the iOS App.

Thanks in advance

3 posts - 2 participants

Read full topic

I have a problem with displaying an input field. When the user clicks on the field to enter the value, the keyboard appears. the portion of the page is partially covered and the input field is no longer visible. what is the best solution to apply?

Catch ionFocus is the best practice to solve my issue?

<ion-input (ionFocus)="adjustLayout($event)"></ion-input>

adjustLayout(event) {
  // Codice per spostare il contenuto in modo che il campo di testo sia visibile
}

Thanks

L

2 posts - 2 participants

Read full topic

Hi, I managed to make Swiper work with Ionic Angular along with using configs. But, I wanted to try putting the pagination buttons on a different element below the swiper-container.

On a normal angular project its working but it seems to be overridden on an Ionic Angular project.

Here are the codes:
home.page.html

<ion-content [fullscreen]="true">
  <swiper-container swiperElement init="false" [config]="config">
    <swiper-slide *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8]"
      ><img src="https://placehold.co/600x400"
    /></swiper-slide>
  </swiper-container>
  <ion-content>
    <div class="test"></div>
  </ion-content>
</ion-content>

home.page.ts:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
} from '@ionic/angular/standalone';
import { SwiperDirective } from '../swiper.directive';
import { SwiperOptions } from 'swiper/types';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    SwiperDirective,
    CommonModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HomePage {
  constructor() {}
  config: SwiperOptions = {
    navigation: true,
    pagination: {
      el: '.test',
    },
  };
}

1 post - 1 participant

Read full topic

We have created an Ionic 7 + Vue 3 app (Options api. No Typescript. Build to both iOS and Android).

Currently we are experiencing a memory leak that is causing crashes after using the app for a few minutes.

We have followed the documentation while setting up ionic but had to make a few modifications to the routing to suit our clients requirements. We have a login and homepage (where projects are retrieved via an API). Here you can choose which project to inspect. When inspecting a project you have a page with a tab bar allowing you to inspect different parts of a project (3 pages with different lists of repeating components displaying different data). Each item in this list can be inspected.

This means we have 3 pages:

login
home
projectInfo

And a tabbar with 3 tabs:

info
activities
plans

The plans can be inspected and show a interactive environment for which the data can be around 50 ~ 100 mb to load.

The issue appears when we switch between home and projectinfo page multiple times (it speeds up a lot when we inspect the plans). We can see in the dev-tools and Android studio profiler that the html elements (ionic elements) are being cached but never reused or cleared. This means that each time we switch pages all elements are cached (each time). We have seen the memory usage go up to ~500mb before crashing on iOS.

In this image you can see that the JS heap size, DOM elements and event listeners increase when switching pages. But they never drop back down. With ionic elements - Album on Imgur

In the second image we replaced all ionic elements with plain html and we can see that it does drop after a short amount of time. Without ionic elements - Album on Imgur

We have done quite a bit of research and we found other people with the same issue but we haven’t found an acceptable solution yet (for example: How to disable cache for a single ion-content or component? - #17 by rapropos). We also have applied all tips we have found so far. This includes manually un-setting the data in Vue’s unmount / beforeUnmount, variable references between components and component references are now absolute minimal, lazy loading of components has been applied where needed, Virtual scrolling (so it has less html in the lists). But none of these options have actually fixed the issue.

The only thing that we found out that solves this issue would be to replace all ionic elements with normal html and Vue. This of course will cause a lot of different issues with compatibility between Android and iOS.

I cant believe that this is an issue on Ionic’s side and I’m looking for more solutions and/or possible causes. Does anyone have an idea or explanation?

3 posts - 3 participants

Read full topic

We submitted a small change to our App today to the Android Playstore and got this warning:

Double Splash Screen

The crawler detected a blank loading screen or a custom splash screen that is shown in your app after the system splash screen. Users launching your app on Android 12 or higher will see 2 splash screens.

To fix this issue, update your app to use the SplashScreen API.

We have made no changes to the Splashscreen functionality in this release - has anyone else had this warning appear?

1 post - 1 participant

Read full topic

Hi all on latest ionic v8, what is the easiest/cleanest way to prevent the keyboard on mobile device from pushing up the ion-footer when open? The preference is when keyboard is open, it covers the footer. I need a solution that works on PWA. Thanks in advance.

1 post - 1 participant

Read full topic

Hello guys,

I build prototype app (my first ever ionic project) in ionic 7 with angular. Few days back ionic 8 was annouced so I decided it would be probably for the best to use the newest version and because I was switching the angular to v. 17 I also decided to rebuild my app to standalone component based.

After migration appearance of my ion-input elements changed and the labelPlacement property no longer works for me. Also highlight colors are no longer working…

There are multiple issues which appeared after migration but lets start simple I guess…

Thanks for any ideas

1 post - 1 participant

Read full topic

I developed an old ionic angular cordova app.

I had to make new changes to solve a business problem. I can build the app. I can run it in the simulator. the splash screen appears. a blank page always appears and I can’t do anything

In the XCode log I have several errors/warnings:

FBSDKLog: Starting with v13 of the SDK, a client token must be embedded in your client code before making Graph API calls. Visit https://developers.facebook.com/docs/ios/getting-started#step-3---configure-your-project to learn how to implement this change.

Failed to request allowed query parameters from WebPrivacy.

*** -[NSKeyedUnarchiver validateAllowedClass:forKey:] allowed unarchiving safe plist type ''NSString' (0x7ff841f18bb8) [/Library/Developer/CoreSimulator/Volumes/iOS_21E213/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS 17.4.simruntime/Contents/Resources/RuntimeRoot/System/Library/Frameworks/Foundation.framework]' for key 'NS.keys', even though it was not explicitly included in the client allowed classes set: '<decode: bad range for [%{public}@] got [offs:686 len:489 within:0]>'. This will be disallowed in the future.<decode: bad range for [%{public}@] got [offs:1175 len:1 within:0]>

FBSDKLog: fb-messenger-share-api is missing from your Info.plist under LSApplicationQueriesSchemes and is required.

This is my configuration

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.7.4
   @angular-devkit/build-angular : 13.3.11
   @angular-devkit/schematics    : 12.2.18
   @angular/cli                  : 13.3.11
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : ios 6.3.0, ios_ 6.3.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 17 other plugins)

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : not installed globally

System:

   ios-deploy : 1.11.4
   ios-sim    : 8.0.2
   NodeJS     : v16.10.0 (/Users/lsantaniello/.nvm/versions/node/v16.10.0/bin/node)
   npm        : 7.24.0
   OS         : macOS
   Xcode      : Xcode 15.3 Build version 15E204a

I tried removing the ios platform and recreating it but it doesn’t solve the problem

Does anyone have any advice for me?

4 posts - 2 participants

Read full topic

I am porting an ios capacitor plugin to android.

got the build to work. for the plugin

now made a test app to make sure it all works like the ios version,

but I have a build problem… the plugin uses a third party lib, pulled from private jetbrains maven repo.

built plugin
npm install plugin in app
npx cap sync shows plugin installed…
ionic capacitor build android succeeds ok
opens android studio (new… can I get last?)
now run/debug app gradle build fails

   > Could not find com.estimote:uwb-sdk:1.0.0-rc5.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/com/estimote/uwb-sdk/1.0.0-rc5/uwb-sdk-1.0.0-rc5.pom
       - https://repo.maven.apache.org/maven2/com/estimote/uwb-sdk/1.0.0-rc5/uwb-sdk-1.0.0-rc5.pom
       - file:/Users/sam/ionic/fribble/android/capacitor-cordova-android-plugins/src/main/libs/uwb-sdk-1.0.0-rc5.jar
       - file:/Users/sam/ionic/fribble/android/capacitor-cordova-android-plugins/src/main/libs/uwb-sdk.jar
       - file:/Users/sam/ionic/fribble/android/app/libs/uwb-sdk-1.0.0-rc5.jar
       - file:/Users/sam/ionic/fribble/android/app/libs/uwb-sdk.jar
     Required by:
         project :app > project :estimoteplugin

in the plugin I had to add a repository

    maven {
        url = uri("https://estimote.jfrog.io/artifactory/android-proximity-sdk/")
    }

and a dependency

    implementation("com.estimote:uwb-sdk:1.0.0-rc5")

now (sorta like the IOS app problem of the same vendor lib), the lib is not found.
so I add the maven lib to the app repositories

        maven {
            url = uri("https://estimote.jfrog.io/artifactory/android-proximity-sdk/")
        }

ionic capacitor build android

opens android studio, push debug

org.gradle.api.internal.artifacts.ivyservice.DefaultLenientConfiguration$ArtifactResolveException: Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
org.gradle.internal.resolve.ModuleVersionNotFoundException: Could not find com.estimote:uwb-sdk:1.0.0-rc5.

tried adding as a dependency in app, now get other errors

Cause 1: org.gradle.internal.resolve.ModuleVersionResolveException: Could not resolve androidx.core.uwb:uwb:1.0.0-alpha07.
Required by:
    project : > com.estimote:uwb-sdk:1.0.0-rc5
Caused by: org.gradle.internal.component.NoMatchingGraphVariantsException: No matching variant of androidx.core.uwb:uwb:1.0.0-alpha07 was found. The consumer was configured to find a library for use during runtime, compatible with Java 17, packaged as a jar, and its dependencies declared externally, as well as attribute 'org.gradle.plugin.api-version' with value '8.6' but:
  - Variant 'libraryVersionMetadata' capability androidx.core.uwb:uwb:1.0.0-alpha07 declares a component, and its dependencies declared externally:
      - Incompatible because this component declares documentation for use during 'library-version-metadata' and the consumer needed a library for use during runtime
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about its elements (required them packaged as a jar)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')
  - Variant 'releaseVariantReleaseApiPublication' capability androidx.core.uwb:uwb:1.0.0-alpha07 declares a library, and its dependencies declared externally:
      - Incompatible because this component declares a component for use during compile-time, with the library elements 'aar' and the consumer needed a component for use during runtime, packaged as a jar
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')
  - Variant 'releaseVariantReleaseRuntimePublication' capability androidx.core.uwb:uwb:1.0.0-alpha07 declares a library for use during runtime, and its dependencies declared externally:
      - Incompatible because this component declares a component, with the library elements 'aar' and the consumer needed a component, packaged as a jar
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')
  - Variant 'sourcesElements' capability androidx.core.uwb:uwb:1.0.0-alpha07 declares a component for use during runtime, and its dependencies declared externally:
      - Incompatible because this component declares documentation and the consumer needed a library
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about its elements (required them packaged as a jar)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')
Cause 3: org.gradle.internal.resolve.ModuleVersionResolveException: Could not resolve no.nordicsemi.android:ble-ktx:2.4.1.
Required by:
    project : > com.estimote:uwb-sdk:1.0.0-rc5
Caused by: org.gradle.internal.component.NoMatchingGraphVariantsException: No matching variant of no.nordicsemi.android:ble-ktx:2.4.1 was found. The consumer was configured to find a library for use during runtime, compatible with Java 17, packaged as a jar, and its dependencies declared externally, as well as attribute 'org.gradle.plugin.api-version' with value '8.6' but:
  - Variant 'releaseVariantReleaseApiPublication' capability no.nordicsemi.android:ble-ktx:2.4.1 declares a library, and its dependencies declared externally:
      - Incompatible because this component declares a component for use during compile-time, with the library elements 'aar' and the consumer needed a component for use during runtime, packaged as a jar
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')
  - Variant 'releaseVariantReleaseRuntimePublication' capability no.nordicsemi.android:ble-ktx:2.4.1 declares a library for use during runtime, and its dependencies declared externally:
      - Incompatible because this component declares a component, with the library elements 'aar' and the consumer needed a component, packaged as a jar
      - Other compatible attributes:
          - Doesn't say anything about its target Java version (required compatibility with Java 17)
          - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')

1 post - 1 participant

Read full topic

I have a list of motivational messages from local sqlite db created during application installation. I need to display these messages one at a time anywhere within the user’s screen. As it seems, I need a background task to run the process to display these messages, additionally, I need the messages to display on top of other apps within the user’s device of course after getting a permission from them. I am using Ionic Capacitor, is this something achievable with Ionic Capacitor? Has anyone here ever done something like this before? Are there any plugins you would recommend? Thank you in advance. I already have some starter code for the messages Vue component, if you may want t o see it, I can gladly share it.

2 posts - 2 participants

Read full topic

Hi, I’ve my package.json as:
{
“name”: “EduApp”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/cdk”: “^17.3.8”,
“@angular/common”: “~17.3.0”,
“@angular/compiler”: “^17.3.0”,
“@angular/core”: “~17.3.0”,
“@angular/forms”: “~17.3.0”,
“@angular/google-maps”: “^17.3.8”,
“@angular/localize”: “~17.3.8”,
“@angular/platform-browser”: “~17.3.0”,
“@angular/platform-browser-dynamic”: “~17.3.0”,
“@angular/platform-server”: “^17.3.0”,
“@angular/router”: “~17.3.0”,
“@angular/ssr”: “^17.3.6”,
“@capacitor-community/capacitor-googlemaps-native”: “^1.2.0”,
“@capacitor/camera”: “^6.0.0”,
“@capacitor/core”: “^6.0.0”,
“@capacitor/filesystem”: “^6.0.0”,
“@capacitor/geolocation”: “^6.0.0”,
“@capacitor/ios”: “^6.0.0”,
“@capacitor/share”: “^6.0.0”,
“@ionic-native/core”: “^5.36.0”,
“@ionic-native/google-maps”: “^5.5.0”,
“@ionic-native/location-accuracy”: “^5.36.0”,
“@ionic/angular”: “^5.9.4”,
“@ionic/cli”: “^6.20.9”,
“@ionic/pwa-elements”: “^3.2.2”,
“@ng-bootstrap/ng-bootstrap”: “^9.1.3”,
“@ng-select/ng-select”: “^6.1.0”,
“@types/google-maps”: “^3.2.6”,
“bootstrap”: “^4.6.2”,
“install”: “^0.13.0”,
“ionic-rating”: “^2.0.0”,
“ionicons”: “^7.4.0”,
“ng-bootstrap”: “^1.6.3”,
“ng2-search-filter”: “^0.5.1”,
“ngx-bootstrap”: “^6.2.0”,
“ngx-pagination”: “^6.0.3”,
“npm”: “^10.7.0”,
“rxjs”: “^7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.14.3”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~17.3.6”,
“@angular/cli”: “^17.3.6”,
“@angular/compiler”: “~17.3.0”,
“@angular/compiler-cli”: “~17.3.0”,
“@angular/language-service”: “~17.3.0”,
“@capacitor/cli”: “^5.0.0”,
“@ionic/angular-toolkit”: “^11.0.1”,
“@types/googlemaps”: “^3.43.3”,
“@types/jasmine”: “^3.6.11”,
“@types/jasminewd2”: “^2.0.10”,
“@types/node”: “^12.20.55”,
“codelyzer”: “^6.0.0”,
“jasmine-core”: “~5.1.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “^3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.1.0”,
“karma-jasmine”: “^5.1.0”,
“karma-jasmine-html-reporter”: “^2.1.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “5.4.2”
},
“description”: “An Ionic project”
}

After I npm update and npm start / ng serve to compile the app, I got the following msg:

./src/app/app.module.ts:7:0-88 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/common/http’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src/app’

./src/app/app.module.ts:12:0-70 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/cdk/scrolling’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src/app’

./src/polyfills.ts:4:0-45 - Error: Module not found: Error: Can’t resolve ‘node_modules/@angular/localize/init’ in ‘/Users/jg/Desktop/eduApp ionic /EduApp/src’

Error: node_modules/@ionic/core/node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface ‘HTMLIonIconElement’ cannot simultaneously extend types ‘IonIcon’ and ‘HTMLStencilElement’.
Named property ‘ariaHidden’ of types ‘IonIcon’ and ‘HTMLStencilElement’ are not identical.

66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
~~~~~~~~~~~~~~~~~~

Error: node_modules/@ionic/core/node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface ‘HTMLIonIconElement’ cannot simultaneously extend types ‘IonIcon’ and ‘HTMLStencilElement’.
Named property ‘ariaLabel’ of types ‘IonIcon’ and ‘HTMLStencilElement’ are not identical.

66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
~~~~~~~~~~~~~~~~~~

Error: node_modules/typescript/lib/lib.dom.d.ts:7297:101 - error TS2344: Type ‘HTMLElementTagNameMap[K]’ does not satisfy the constraint ‘Element’.
Type ‘HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | … 150 more … | HTMLDetailsElement’ is not assignable to type ‘Element’.
Type ‘HTMLIonIconElement’ is not assignable to type ‘Element’.
Property ‘ariaHidden’ is optional in type ‘HTMLIonIconElement’ but required in type ‘Element’.

7297 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/typescript/lib/lib.dom.d.ts:7776:101 - error TS2344: Type ‘HTMLElementTagNameMap[K]’ does not satisfy the constraint ‘Element’.
Type ‘HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | … 150 more … | HTMLDetailsElement’ is not assignable to type ‘Element’.

7776 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
~~~~~~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Failed to compile. Pls advise how to rectify this node_modules incompatibility issue. Mnay Thanks.

2 posts - 2 participants

Read full topic

Im trying to implement a background task that will run every 1 hour, using @capacitor/background-runner.

in my app im using the @capacitor-community/fcm plugin to subscribe to topics.

Is it possible to call this plugin from the runner.js file ?

(basically what I need is every 1 hour to call an API, recieve an answer, and based on that answer subscribe/unsubscribe from a topic)

if not, what approach should I take to implement such a thing? is my only option to write native code for my ionic app for IOS and Android to handle backgroud tasks? (and if that is the case, any good tutorial on the subject would be much appreciated:)

thanks for any feedback!

1 post - 1 participant

Read full topic

Hey, we encountered the following issue: the next and previos input buttons, on the iOS keyboard accessory bar, do not work as expected;

The expected behavior is the browser scrolling the page and being able to focus every input.
The current behavior is that the neither are the inputs scrolled into the view and neither can you select all, only the ones that are visible in the viewport before opening the keyboard.

I tested with a bare react project and the problem is the following: the moment you introduce an overflow: scroll into a container this feature breaks.
So if you let your app naturally overflow the view ( html height is 200% of the device height ) this feature works as it seems safari is scrolling the whole page, if you set the view to be 100vh / 100% and then give it an overflow: scroll this feature breaks as explained above.

Anybody ran into this?

1 post - 1 participant

Read full topic

The ion-datetime wheel works fine on the device or if the chrome desktop browser is in mobile mode but if not the wheel is not draggable e.g. I can’t drag to change the value. I can click to change it one year at a time.

Is there a way to get this working in

<ion-datetime presentation="date" [preferWheel]="true" [(ngModel)]="additionalDataDob"></ion-datetime>

1 post - 1 participant

Read full topic

I’m encountering an error in my browser console: TypeError: undefined is not an object (evaluating 'r.loadingOverlay.message="Logging in"'), while attempting to configure Ionic’s LoadingController. Any assistance in resolving this issue would be greatly appreciated. Thank you in advance.

I’m encountering this issue while utilizing Ionic’s LoadingController within my component. Below is the snippet from the login.page.ts file:

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { LoadingController, ToastController } from '@ionic/angular';
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCol,
  IonContent,
  IonGrid,
  IonHeader,
  IonIcon,
  IonInput,
  IonItem,
  IonList,
  IonNav,
  IonRow,
  IonText,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { arrowForwardCircleOutline } from 'ionicons/icons';
import { ContainerComponent } from 'src/app/components/container/container.component';
import { AuthResponse, AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  standalone: true,
  imports: [
    IonIcon,
    IonButton,
    IonCard,
    IonCardContent,
    IonCol,
    IonContent,
    IonGrid,
    IonHeader,
    IonInput,
    IonItem,
    IonList,
    IonNav,
    IonRow,
    IonTitle,
    IonText,
    IonToolbar,
    ContainerComponent,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
})
export class LoginPage implements OnInit {
  form!: FormGroup;
  disabled: boolean = true;
  _loadingOverlay!: HTMLIonLoadingElement;
  _errorToast!: HTMLIonToastElement;

  constructor(
    private _titleService: Title,
    private _router: Router,
    private _formBuilder: FormBuilder,
    private _loadingController: LoadingController,
    private _toastController: ToastController,
    private _authService: AuthService
  ) {
    addIcons({ arrowForwardCircleOutline });

    this._titleService.setTitle('Login');
  }

  async ngOnInit(): Promise<void> {
    this._initForm();
    this._subscribeToFormChanges();
    await this._setOrResetLoadingOverlay();
    await this._setOrResetToasts();
  }

  private async _setOrResetToasts(): Promise<void> {
    this._errorToast = await this._toastController.create({
      duration: 1500,
      position: 'bottom',
    });
  }

  private async _setOrResetLoadingOverlay(): Promise<void> {
    this._loadingOverlay = await this._loadingController.create({});
  }

  private _initForm(): void {
    this.form = this._formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
  }

  private _subscribeToFormChanges(): void {
    this.form.statusChanges.subscribe((status) => {
      if (status === 'VALID') {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    });
  }

  public async authenticate(): Promise<void> {
    this._loadingOverlay.message = 'Logging in';
    await this._loadingOverlay.present();

    this._authService
      .authenticate({
        username: this.form.value.username,
        password: this.form.value.password,
      })
      .subscribe({
        next: async (response: AuthResponse) => {
          await this._loadingOverlay.dismiss();

          try {
            await this._authService.processPostLoginOps(response.auth_token);

            this._router.navigate(['/']).then(() => window.location.reload());
          } catch (error) {
            this._loadingOverlay.dismiss();
            await this._setOrResetLoadingOverlay();

            this._errorToast.dismiss();
            await this._setOrResetToasts();

            this._errorToast.message = 'Unable to login';
            this._errorToast.present();
          }
        },
        error: async (error: any) => {
          this._loadingOverlay.dismiss();
          await this._setOrResetLoadingOverlay();

          this._errorToast.dismiss();
          await this._setOrResetToasts();

          this._errorToast.message = 'Unable to login';
          this._errorToast.present();
        },
      });
  }

  public onboard(): void {
    this._router.navigate(['/onboard']);
  }
}

While running the application using the command ionic cap run ios -l --external, the functionality operates as expected. However, upon building the application with the command ionic cap build ios -l --external, the loading overlay fails to appear upon pressing the login button. This issue arises on both simulator and physical devices alike.

Upon employing Safari’s WebInspector to inspect the logs, I encountered the following error: TypeError: undefined is not an object (evaluating 'r.loadingOverlay.message="Logging in"').

1 post - 1 participant

Read full topic

https://forum.ionicframework.com/t/akismet-has-temporarily-hidden-your-post/241545/2

1 post - 1 participant

Read full topic

My code works. But I still get a red underline in VSCode so I want to go over my thought process and hopefully someone can point out what is wrong with my thinking.

I started with this code which was originally just javascript.

<IonInput value={password} onIonInput={event =>setPassword(event.detail.value)} label='Password' type="password" labelPlacement="stacked"></IonInput>

I got a red line under event.detail.value saying:

  Type 'undefined' is not assignable to type 'SetStateAction<string>'.

(property) IonInputCustomEvent<InputInputEventDetail>

This means my type is off. And also I THINK it’s telling me what type to put in there with the IonIonInputCustomEvent<InputInputEventDetail>

When I type the event with that it works!:

<IonInput value={password} onIonInput={(event: IonInputCustomEvent<InputInputEventDetail>) =>setPassword(event.detail.value)} label='Password' type="password" labelPlacement="stacked"></IonInput>

BUT I get a red line under both IonInputCustomeEvent and InputInputEventDetail and the pop up says cannot find name IonInputCustomEvent and cannot find name InputInputEventDetail.

Why do I get this? Is this supposed to happen? Is there a better way of doing this so I don’t get a red line? I’m just afraid I’m doing something correct when really I’m doing something incorrectly.

1 post - 1 participant

Read full topic

Help me! I am creating a new project Angular, black, Standalone but have this issue

error code 1
error path C:\Develop\NewProject\node_modules\nx
error command failed
error command C:\WINDOWS\system32\cmd.exe /d /s /c node ./bin/post-install
error C:\Develop\NewProject\node_modules\nx\src\native\native-bindings.js:244
error throw loadError
error ^
error
error Error: The specified module could not be found.
error \?\C:\Develop\NewProject.nx\cache\18.3.4-nx.win32-x64-msvc.node
error at Module._extensions…node (node:internal/modules/cjs/loader:1454:18)
error at Module.load (node:internal/modules/cjs/loader:1208:32)
error at Module._load (node:internal/modules/cjs/loader:1024:12)
error at Module._load (C:\Develop\NewProject\node_modules\nx\src\native\index.js:58:27)
error at Module.require (node:internal/modules/cjs/loader:1233:19)
error at require (node:internal/modules/helpers:179:18)
error at Object. (C:\Develop\NewProject\node_modules\nx\src\native\native-bindings.js:66:29)
error at Module._compile (node:internal/modules/cjs/loader:1358:14)
error at Module._extensions…js (node:internal/modules/cjs/loader:1416:10)
error at Module.load (node:internal/modules/cjs/loader:1208:32) {
error code: ‘ERR_DLOPEN_FAILED’
error }
error
error Node.js v20.13.1

Ionic 7.2.0
node.js 20.13.1
npm 10.5.2

2 posts - 1 participant

Read full topic