Generated Select aside options not updating unless an option node is being added or deleted from DOM

[kiwdahc]

Bug report

Tradeshift UI version affected

Latest Version on v4apps

Expected Behavior

TSUI auto-created select aside should re-render any time the options are mutated as well as when they are added / removed. One way to solve this would be to add a key to each option and TSUI can see if any of the keys change which would result in a flag of TSUI knowing it needs to re-render.

Actual Behavior

When putting a select in a form in TSUI an aside with the options is automatically created when you click on the select. The aside re-renders properly if any of the option nodes are added or deleted from the select, the problem that is occurring is when options aren't being added or removed but instead mutated TSUI is not seeing a difference. This becomes a problem mainly when using React, if you remove and add the same amount of select options React is smart enough not to delete and add back dom nodes of the same type and instead mutate them with the new values, which results in TSUI not picking up the change.

Steps to reproduce

I made some code pens to demonstrate the issue just open the asides and watch the values update. First one works second one doesn't even though both are changing the options the second isn't removing or adding dom nodes. https://codepen.io/anon/pen/aaVqLb https://codepen.io/anon/pen/JaOprd

Screenshots (optional)

N/A

[lloydhumphreys]

@sampi will take a look and we'll determine whether to fix in V11 or V12.

[zdlm]

Fixed in V12