Dropdown onchange event is not fired

[nakovskijosif]

Are you reporting a bug or a feature?

• Bug

Expected Behavior

When value is change event should be fired

Actual Behavior

Event is not fired

Steps to Reproduce the Problem

Use the dropdown below
<axa-dropdown title="Please Select a value (Initial title)" native items='[ {"name": "Item 1", "value": "Item 1", "url": "#", "isSelected": false }, {"name": "Item 2", "value": "Item 2", "url": "#", "isSelected": true }, {"name": "Item 3", "value": "Item 3", "url": "#", "isSelected": false } ]' onAxaChange="alert('test')"> </axa-dropdown>

when value is changed the alert is not called.

[AndyOGo]

Thanks @nakovskijosif
Maybe related to #844 and #843 🤔

[jackblackCH]

We are analyzing and fixing. @LucaMele mentioned that onChange should be triggered automatically on value change.

[LucaMele]

onAxaChange

[nakovskijosif]

@AndyOGo @jackblackCH, thank you for your feedback.
Would you please have a look at the withReact implementation, at the moment it is not rendered and

setProps(): Custom Element not connected and props never update <axa-dropdown>​</axa-dropdown>​ setProps @ with-update.js:234 updateWebComponentProps @ with-react.js:194
message is displayed in console.

[AndyOGo]

@nakovskijosif
Thank you for your quick response.
We would very much appreciate a complete reproduction sample, e.g. at https://codesandbox.io/

Unfortunately the other issues at the moment are that:

• React does not officially support custom elements yet
• Currently the React integration has several issues, like controlled inputs and nested dynamic children dynamic custom elements loose react refs, never connect and do not update props #778
• And custom elements seem to break at least Jest and React-router and my others of React's ecosystm 😞

Sorry personally I'm busy right now, but I'm sure the webhub team will help you.

[nakovskijosif]

Reproduction sample on the link below.
https://codesandbox.io/s/2pv73ojvvj
Please note that if you change the patterns-library version to 244 the sample works.

[jackblackCH]

Reproduction sample on the link below.
https://codesandbox.io/s/2pv73ojvvj
Please note that if you change the patterns-library version to 244 the sample works.

It does not render the dropdown at all if I open the link

[nakovskijosif]

That is correct, as of the latest major refactor the with react does not render, the reason being my comment above. If you change the version to 244 the component is rendered and the event is fired.

[jackblackCH]

In version 244 I try this via the preview and also no alert()

  <axa-dropdown onAxaChange="alert('foo')" title="title" items='[{"name": "Item 1", "url": "#"}, {"name": "Item 2 loooooong", "url": "#"}, {"name": "Item 3", "url": "#"}]'>
  </axa-dropdown>

[jackblackCH]

I tried your sandbox with version 244 and the alert does not work. https://codesandbox.io/s/2o19mm1mrn

[AndyOGo]

@nakovskijosif
@jackblackCH
@LucaMele
Holy moly, we didn't realize that this kind of thing isn't supported at all... attributes containing JavaScript code as string to be evaled.

I would say this isn't a bug, but rather wrong application.

@nakovskijosif
To listen for events, you have to:

• either attach them if you use native JS, by addEventListener
• or use React props, like onAxaChange={() => {}}

Nevertheless, the dropdowns onAxaChange event still seems to be broken 🤔

[nakovskijosif]

Sorry for all the confusion, my sample do uses react props and that is how I'm using the with react version.
The sample in the description though is using inline javascript(was working with onchange before but not onAxaChange and that is how it is used on prod aem at the moment).

Maybe I should've separated this issue into two.
Thank you for the feedback.

[LucaMele]

Closing as V2 is released. If issue is still relevant in v2, please re-open