Calcite-components: Bug: Select menu blank after Ember re-render

[nwhittaker]

Summary

Possibly stems from a quirk with how Ember templates are updated, but re-rendering the CalciteSelect component causes the menu to appear blank.

Actual Behavior

After re-render, opening the calcite select menu reveals a list of blank options.

Expected Behavior

After a re-render, opening the calcite select menu reveals its list of options.

Reproduction Steps

1. Visit https://jsbin.com/gedivigoqo/1/edit?html,js,output and wait for the Output column to render a calcite select component.
2. Open the calcite select menu and notice the two options.
3. Close the menu and click the hide button. Click the button again to cause a re-render of the calcite select component.
4. Open the calcite select menu and notice the two options are now blank.

Relevant Info

Seen in latest macOS versions of Chrome, Firefox, and Safari. Additionally, the following console error appears:

TypeError: undefined is not an object (evaluating 'this.selectEl.append')

One possible workaround is to populate the calcite-option elements' label attributes. This appears to have the side-effect of keeping the option values populated.

[patrickarlt]

This is also affecting us when using React it looks like the mutation events MIGHT trigger before the select is rendered hence why this.selectEl is undefined.

[jcfranco]

Installed.

@nwhittaker, @patrickarlt could you help verify this with @esri/calcite-components@next?

[nwhittaker]

@nwhittaker, @patrickarlt could you help verify this with @esri/calcite-components@next?

@jcfranco, I updated the js bin to reference the @next Calcite tag[1] and I no longer see the console error, but the menu is still blank for me after the second render. Per https://github.com/Esri/calcite-components/issues/1409#issuecomment-751835804, I think the underlying error is that for the second render, the mutationObserver is firing before storeSelectRef() is called.

For the first render, mutationObserver fires after the call to storeSelectRef() -- which would explain why we don't see a problem until subsequent renders.

[1] https://jsbin.com/cosalesiya/2/edit?html,js,console,output

[jcfranco]

I think the underlying error is that for the second render, the mutationObserver is firing before storeSelectRef() is called.

storeSelectRef executes the method from the mutation observer callback, so I think there's another issue here. I'll take another look.

Thanks for testing!

[nwhittaker]

storeSelectRef executes the method from the mutation observer callback, so I think there's another issue here.

I guess my point is that selectEl is currently set in storeSelectRef, so if that runs before the mutation callback fires, selectEl isn't populated yet:

https://github.com/Esri/calcite-components/blob/bba947b08753cc1f7aab0fddd4f6a6771bf3c355/src/components/calcite-select/calcite-select.tsx#L221-L222

[jcfranco]

Took a look at this today and noticed that it works fine with the debug build, but not with the production one. I'll have to do some more digging. In the meantime, could you try using the label prop? https://jsbin.com/vuqujuguko/edit?html,js,output

[nwhittaker]

In the meantime, could you try using the label prop?

Confirming this looks like a reasonable workaround for the time being -- thanks. I'll add a note to the issue description.

[julio8a]

Thanks guys! Closing this out, please re-open if there are further issues.

[jcfranco]

There is a workaround, but this hasn't been fixed. Reopening to not lose track of this.

[jcfranco]

This should be fixed now.

Self-verified with the provided test case + @[email protected].