Browser not updated after DOM is updated

[Cutless009]

I'm submitting a ...
[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request

Current behavior
Angular does not update the browser once it runs.

For instance, if you have a label and an input, if you bind the "for" attribute of the label to the "id" attribute of the input via a passed input, the browser will not recognize that the two are linked because Angular does not let the browser know it updated the DOM.

EXAMPLE MARKUP

<myInput id="input1"></myInput>

EXAMPLE COMPONENT

@Input id: string;

EXAMPLE COMPONENT MARKUP

<label [for]="id">My Label</label> <input [id]="id" type="text" />

RESULT:

Clicking the label does not apply focus to the input. This can also be seen with labels of radio buttons and checkboxes, where clicking the label does not produce the desired default browser behavior of interacting with the associated element.

RESULT:

Clicking labels for related inputs does not interact with the assigned element.

Expected behavior
Default browser behavior should be maintained when associated form elements via for and id.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview

What is the motivation / use case for changing the behavior?
Should be able to use Angular to create dynamic components without having to reproduce default browser behavior. All form elements usingfor and id linking do not work as expected when given a dynamic value

Please tell us about your environment:
Windows 7, VSCode, NodeJS, Angular Generator

• Angular version: 2.0.X
  2.3.0

• Browser:
  all

• Language:
  all

• Node (for AoT issues):
  6.8.0

[DzmitryShylovich]

No options are added to the parent component select.

Because option is not a direct descendant of select http://prntscr.com/djwnxl

You can reproduce the same behavior by just wrapping option into div. https://plnkr.co/edit/v8nM3dJ1MEQxluLHRKry?p=preview

[Cutless009]

That's fair, I can work with that as long as adding them to the parent component through a service produces options in the drop-down list. I'll try it out and report back.

Previous issues still stand.

[DzmitryShylovich]

Previous issues still stand.

can u pls update your plunkr because it's not clear what exactly doesn't work and what is the expected behavior?

[Cutless009]

Updated original post and plunkr.

[vicb]

• you probably want [attr.id] ? Note that [for] is a shorthand for [attr.for] as for is not a property on the DOM - not sure if [id] works in this case,
• for sure you have too many bob1, id are supposed to be unique - they are duplicated on 4 different els in your plunker.

[Cutless009]

Yeah I totally posted this without trying [attr.id], right?

Updated plunkr: http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview

In the future please don't close issues without trying your "fix" first. Thanks.

[vicb]

@Cutless009 In the future remember to be kind here and make your homework before posting issues. We do not provide support here.

Now read my previous message carefully, double check your plunker and fix your issue. You can even thank me after you're done !

[pkozlowski-opensource]

@Cutless009 the root cause here is that you've got multiple elements with the same id in the DOM (you will have one on an <input> but another one will be on your custom component element. An easy work-around is to use a property name different from id or explicitly remove id from the native element on which your component is sitting on.

@vicb what I find rather surprising is that we shadow binding to native properties if there is a directive with an input name equals to a property name BUT we don't do this for components: http://plnkr.co/edit/7joejbZMIlwvW04DSpuc

This took me by surprise and this is not something I would expect or would know how to explain (that is - what is the reasoning behind).

[Cutless009]

I wasn't trying to be rude. Did you look at my new plunk? There is nowhere that bob1 is repeated other than in value, which shouldn't make any difference whatsoever, and the issues till persists. Here's the link again in case I got it wrong last time: http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview

Also if the issues was multiple matching IDs, default browser behavior would be to interact with the last-added element with the matching ID, thus at least one of them would be changing.

[DzmitryShylovich]

http://prntscr.com/dlvsp0

[Cutless009]

Fair enough. Sorry for the trouble.

[angular-automatic-lock-bot]

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.}