Button is unresponsive after 1st click...what is going on? | Angular Community | Page 1

serene oar Mar 7, 2023, 4:44 PM

#

@velvet sage why the emoji?

next hazel Mar 7, 2023, 4:46 PM

#

It's probably because you're not giving a lot of information. Remember, we can't see your code and what's happening on your screen. If you want anyone to help you, please provide a minimal reproduction of what you're doing.

serene oar Mar 7, 2023, 4:47 PM

#

hmm...

#

if the feature flag is on, then open the unlink shared rule modal

#

if not, then open a different modal

#

on the modal, there is a save button

#

and that is a general save button

#

the first save click works! but then any subsequent save click results in no action

#

what is going on?

next hazel Mar 7, 2023, 5:16 PM

#

Have you tried adding some console.log's to see which condition is reached on the second click? What happens when you close the modal, are you assigning false to the opened modal property?

serene oar Mar 7, 2023, 5:19 PM

#

is angular not great at state management?

#

the console.log("here") prints everytime I click on the save button

next hazel Mar 7, 2023, 5:29 PM

#

Not sure what you expect Angular to do here? If that condition is reached, but the modal isn't opened you need to look at the logic responsible for opening it. this.unlinkSharedRuleModal = true; Is this set to false anywhere when the modal is closed?

serene oar Mar 7, 2023, 5:32 PM

#

i have a method called cancelUnlinkSharedRuleModal() where it does this:

public cancelUnlinkSharedRuleModal(): void {
   this.unlinkSharedRuleModal = false;
}

next hazel Mar 7, 2023, 5:37 PM

#

and how is this method called? Have you checked that closing the modal calls this method? For a modal I would normally expect modal.open() or modal.close() methods, not just setting a class property to true or false. Is it just working with a *ngIf?

serene oar Mar 7, 2023, 5:42 PM

#

so in the template, the modal is called like:

<ui-modal [isOpen]="unlinkSharedRuleModal" ...

#

no *ngIf

next hazel Mar 7, 2023, 5:46 PM

#

Ok, do you have access to this modal or is 3rd party? Still not sure how the method to set the property to false is called.

and how is this method called? Have you checked that closing the modal calls this method?

serene oar Mar 7, 2023, 5:48 PM

#

as you can see when the user clicks on the Cancel button, it calls the cancelUnlinkSharedRuleModal() method

next hazel Mar 7, 2023, 5:55 PM

#

And have you confirmed that the property is correctly set to false?

serene oar Mar 7, 2023, 6:00 PM

#

when user clicks on cancel, yes, unlinkSharedRuleModal is set to false

next hazel Mar 7, 2023, 6:01 PM

#

Ok, and the modal is 3rd party or do you have access to it>

serene oar Mar 7, 2023, 6:02 PM

#

ui-modal is built by a previous team

#

not a 3rd party

#

it uses EventEmitter from angular/core

next hazel Mar 7, 2023, 6:03 PM

#

ok, and what about this (onDismiss)="null"? This looks like the event the modal emits when it's closed, correct?

serene oar Mar 7, 2023, 6:03 PM

#

correct!

next hazel Mar 7, 2023, 6:03 PM

#

so, why isn't that calling cancelUnlinkSharedRuleModal()?

serene oar Mar 7, 2023, 6:05 PM

#

cancelUnlinkSharedRuleModal() is called at the click action

next hazel Mar 7, 2023, 6:05 PM

#

It looks like the modal is holding internal state and you're trying to go around the logic to close the modal

serene oar Mar 7, 2023, 6:05 PM

#

internal state? what do you mean?

next hazel Mar 7, 2023, 6:06 PM

#

doesn't the modal provide a way to close it? Instead of you having to create a method for it?

#

you're teling the modal to open by using one of it's inputs isOpen, but you also need to tell the modal when it's closed so it can reset it's internal state

serene oar Mar 7, 2023, 6:09 PM

#

the cancelUnlinkSharedRuleModal() method is for when user clicks on the Cancel link

#

i don't know how to activate a cancel without a method

next hazel Mar 7, 2023, 6:09 PM

#

Ok, what happens when you click on the X? I guess the modal will close, but there's no call to cancelUnlinkSharedRuleModal()

serene oar Mar 7, 2023, 6:10 PM

#

yup, when X is clicked on, it closes the modal

serene oar Mar 7, 2023, 6:39 PM

#

not sure how i can get the cancel link to behave like the X'

next hazel Mar 7, 2023, 6:40 PM

#

Hard for me to say since i'm not familiar with how the modal logic is implemented

#

if you click x, you're able to open it again?

serene oar Mar 7, 2023, 6:41 PM

#

yup!

#

there is no disruption

#

the modal logic for the X is:

@Output() public onDismiss = new EventEmitter<void>();

next hazel Mar 7, 2023, 6:43 PM

#

well, the click event is probably somewhere in the template for the modal. Can you check which method that is calling?

serene oar Mar 7, 2023, 6:44 PM

#

probably in the onDismiss:

<ui-modal [isOpen]="unlinkSharedRuleModal" [allowCancel]="true" (onDismiss)="null">

next hazel Mar 7, 2023, 6:45 PM

#

That's in your component template, but I assume the html for the X (including click event) is in the template for the modal component

serene oar Mar 7, 2023, 6:51 PM

#

gotcha

serene oar Mar 7, 2023, 7:43 PM

#

okay, i'm doing more fiddling around

#

and the second click seems to be unresponsible when i click X on the modal

next hazel Mar 7, 2023, 7:47 PM

#

So, the modal was created by another team. Is there no documentation for it or can you maybe see how it's used in other projects?

serene oar Mar 7, 2023, 8:20 PM

#

found the problem

#

(onDismiss)="null"

#

there is no state saved

#

i have to set a false state instead of setting it to null

next hazel Mar 7, 2023, 8:56 PM

#

Good to hear you found the problem 🙂

#Button is unresponsive after 1st click...what is going on?