Select menu rendering

[rbureau85]

It's very intermittent but if you use the select menu the options are outside the select.

here is my code
let selectData = rowData.map((item, index) => { return <option key={index}>{item.name}</option> }); render( <> <rux-select input-id="1" label="Select Schedule" label-id="1" onRux-change={handleSelectedScheduleChange}> {selectData} </rux-select> </> )

If you review my screen shot you can see they are listed beside the select and when the rux-select is inspected the select is closed before the options.

Also the onRux-change does not work at all

.

[markacianfrani]

Try using the React-wrapped component (camelCase) instead-- <RuxSelect></RuxSelect> instead of <rux-select></rux-select> That should get the change event working properly.

Our React wrapper uses our Web Components under the hood. is the wrapper version, is just the plain web component (with all its React flaws). I realize all of our docs only mention the web component version so I can see this being confusing. We'll put some more thought into documenting that better.

As for the options being rendered outside the select, we'll take a look at that more.

[micahjones13]

We've spun up a codesandbox using your example code here.
Because of the way React interacts with web components, custom events such as our rux-change won't be heard unless refs are set. To prevent having to do this, we've created the @astrouxds/react package that wraps our Stencil web components in React, thus giving it all the normal functionality.
We haven't been able to reproduce the options appearing outside of the rux-select, so please feel free to fork that sandbox and reproduce it, and we will take a look. Thanks!

[rbureau85]

I haven't completely confirmed this yet but I think it has something to do with the data coming in over a websocket. Every other refresh the options appear inside the select. On the others they are outside the select.

…

On Wed, Sep 22, 2021 at 10:20 AM Micah Jones ***@***.***> wrote: We've spun up a codesandbox using your example code here. <https://codesandbox.io/s/shy-forest-v3k10?file=/src/App.js> Because of the way React interacts with web components, custom events such as our rux-change won't be heard unless refs are set. To prevent having to do this, we've created the @astrouxds/react package ***@***.***/react> that wraps our Stencil web components in React, thus giving it all the normal functionality. We haven't been able to reproduce the options appearing outside of the rux-select, so please feel free to fork that sandbox and reproduce it, and we will take a look. Thanks! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/RocketCommunicationsInc/astro-components-stencil/discussions/233#discussioncomment-1370567>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFUROBEJU47QHSEWLFG7N43UDH637ANCNFSM5EPQRIMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[markacianfrani]

@rbureau85 thanks for bringing this up! we were able to reproduce this and just published a new version that should resolve this. Can you try updating to @astrouxds/astro-web-components 0.0.17 and @astrouxds/react 0.0.7 and let us know if that fixes your issue? You'll want to take a look at our breaking changes since there's been a few recent ones that have been added.

[rbureau85]

Seems to work good now! Thanks for the update!