click events propagation's problem with buttons wrapped into <label> about angular HOT 9 CLOSED

Interesting !

I'm noting :

• event.preventDefault() does prevent the issue when called in confirmHandler().
• Going zoneless and call detectChanges() does not fix the issue.
• If detectChanges isn't called in confirmHandler(), the issue doesn't occur : the edit button being rendered plays a part here.

It definitly looks like an HTML relatedissue.

from angular.

Please have a look at this pure JS repro : https://stackblitz.com/edit/typescript-vint5d?file=index.html,index.ts

from angular.

I agree with @JeanMeche , the construction of the HTML is a bit strange.
Normal code should be something like this :
<label for="input_id" >my label</label>> <input id="input_id" type="text" name="my_input" />

Referring to the MDN documentation - label, what is actually did with the HTML code is not compliant and could lead to issues, or accessibility problems.

from angular.

@JeanMeche , @maequise thank you for your answers. But, if you look Accessibility Concerns input into label is normal and allowed.
In any case, in my opinion, good practices and accessibility should not be confused with the fact that the whole application "crashes" by doing this. In fact only now did I notice that the rest of the app also suffers from reactivity problems after issue.

It is as if the tag label captures the event of the edit button and that then remains even when we click on the others.
In my opinion this malfunction is abnormal

from angular.

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

I think the text is pretty clear. This is not recommanded.

from angular.

Yes it is, but it is accessibility concerns it is not technical prohibition. In fact documentation immediately shows the best practice to use the input inside label.

from angular.

I'll close it for 2 reasons :

• Button in labels are not recommended
• Since this is reproducible with bare js, this isn't an Angular issue but more likely a browser issue.

from angular.

I was playing with this more to see if it reproduces in Safari, which it does, so sharing some more findings:

the cancel/confirm click event for the button is handled, resulting in a rerender of the template. The edit button reappears as edit mode was ended. Then, the label processes the event as it's associated with the button, but it re-initiates the event likely because it determines that the event's target is not its associated button (as the associated button has since been replaced with the edit button during the rerender). Hence, a new event is triggered on the edit button, immediately entering edit mode again. The toggling happens without paint operation so is invisible to users.

You can avoid this by using event.preventDefault() to stop the label's default processing of the event.

from angular.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

from angular.