Only first letter regonized as key + Typing to form elements not possible

[daheadcracker]

Hi,
I just upgraded from version 0.x to "ngx-translate-phraseapp": "^1.1.2" .

Setup:
angular: 15.2.8
@ionic/angular: 6.7.1

I'm facing 2 issues:

1. Keys are not picked up correctly. Only the first letter of the key is showing and I think therefore it wants to create new keys allthough all keys are already synced with phrase.
   
   

2. With version 0 we "only" had the issue that editing of the strings wasn't possible on modals because the focus of the cursor was always jumping somewhere into the modal. This issue is worse now in version 1. Now also in the e.g. the root view I'm not able to click on any input form to type. Not the search bar nor within the phrase modal that pops up to edit a translation -> no cursor!
   
   

[daheadcracker]

Setting the config to useOldICE: true, leads also to picking up no keys at all. Clicking the editing buttons on the page next to the keys/translations is not doing anything in the translation overlay. No console errors either in v0 or v1 despite debugMode: true,.

[daheadcracker]

Was able to kinda fix the 2. issue on the root view with this parameter:
fullReparse: false,

The issue like in v0 still persists in modals. Still not able type to the input elements of phrase if any angular modal of the app is opened.

[daheadcracker]

I could fix the first issue by removing the config parameters:

prefix: "",
suffix: "",

These parameter seem to be only relevant in version 0.
The second issue persists.

[itsahsiao]

Hi @daheadcracker, thanks a lot for reporting this. We'll have to adjust the config properly to reflect the latest version and look into the issue with the modal and inputs.

[daheadcracker]

Hi, any news on the modal issue?

[itsahsiao]

@daheadcracker We have this planned in our current sprint and will have a look within the next weeks. Will keep you posted!

[flowreaction]

Hi @daheadcracker, I am having difficulty reproducing this, could you maybe share some of your setup or create a reproduciton repository with our Demo Phrase project which has these credentials:

projectId: '00000000000000004158e0858d2fa45c',
accountId: '0bed59e5',

login with user: demo@phrase.com pw: phrase

[daheadcracker]

Hi @flowreaction, thanks for looking into this. I created a demo repo thats similar to mine:
https://github.com/daheadcracker/phrase-modal-bug

It's using angular 16 / Ionic 7 but the issue is the same. Serve it and click the "open modal" button, then try to add a new key. You will not able write anything to the phrase "new key" modal input boxes because the cursor is jumping somewhere else. Try to add a new key now, without opening the demo modal and there it's working.

[flowreaction]

@daheadcracker thanks I will investigate and get back to you asap

[daheadcracker]

Hi, any news on the modal issue? In the meantime I updated to version 1.1.3. The UI changed to the same as on app.phrase.com, but the problem with translating strings inside of modals still exists. The textbox input element gets highlighted correctly on click, but the cursor is not appearing.

[itsahsiao]

@daheadcracker We had an initial look recently and it looks like the ionic library might be interfering with the modals and inputs. We need to spend some more time and have another deeper look to see if we can resolve this. Sorry to keep you waiting and we will keep you posted!

[itsahsiao]

@daheadcracker Just to keep you posted, this issue is planned in a sprint and we will have another look.

[github-actions]

Hey! This issue is still open, but there hasn't been any activity for a week now, so we will be marking this issue as stale and closing it in a week if it's still inactive.

[daheadcracker]

Nope, please don't close. Issue is still not resolved.

[Varpuspaavi]

@daheadcracker I took a look on the modal issue and had some findings.

Ionic has this modal focus trapping on card type modals that seemingly can't be disabled, but on sheet type modals this can be worked around with backdropBreakpoint.

Of course the functionality between these types is not the same so can't be directly interchanged :/

To me this functionality does looks like a feature/restriction in Ionic rather than ICE, and we can't really work around this on our side.

Luckily I have found a solution for you 😄 You can use class ion-disable-focus-trap on the modal to disable the focus trapping allowing ICE to work with the modals.

    let modal: any = await this.modal.create({
      component: ExploreContainerComponent,
      componentProps: {},
      cssClass: "ion-disable-focus-trap",
    });

Screen.Recording.2023-12-06.at.9.41.41.mov

@daheadcracker Please let me know if this helps!

[github-actions]

Hey! This issue is still open, but there hasn't been any activity for a week now, so we will be marking this issue as stale and closing it in a week if it's still inactive.

[github-actions]

This issue was closed because it has been inactive for one week since being marked as stale.