Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

paper-select : parentElement is null error after using #1139

Open
larryh opened this issue Mar 21, 2020 · 27 comments
Open

paper-select : parentElement is null error after using #1139

larryh opened this issue Mar 21, 2020 · 27 comments

Comments

@larryh
Copy link

larryh commented Mar 21, 2020

Hi,

First of all: thanks for all of the work you folks do on Ember Paper!

I just upgraded ember from 3.15 to 3.17, and ember-paper from .beta.26 to .beta.29 and am having a problem with ember-select.

The drop-down has a list of states, and when you select a state you get a list of the politicians in that state. It starts out ok, and when you select a state you get the correct list of pols, but in so doing you get a parentElement is null error (which you can see in the console) and the app's entire UI is frozen.

Also note that in the last screenshot, the selected state, e.g. Massachusetts, does not appear in the select-box, instead the "Select A State" placeholder has "moved up" above the control and stayed there.

I have attached screenshots of the process (in order, i.e. 1_xxx, 2_yyy, 3_zzz). Here is the code that I use, which has worked for a long time - even with the new "Octane Way" of doing things.

Can someone shed some light on this? Obviously I had to back down to .beta.26 so I can use the app.

Actually, I guess I should try moving to .27 and then .28 to see exactly where this happens. I will do that and update this issue with my findings. In the meantime, here is the code that I use (it's a component):

` <PaperSelect
data-test-select-pols-state
@Label="State"
@Placeholder="Select a State"
@options={{this.states}}
@selected={{this.selectedState}}
@onchange={{fn this.filter "state"}}
class="column-control" as |state| >
{{state.name}}
</PaperSelect>

`

1_InitialState
2_States
3_AfterSelection

@larryh
Copy link
Author

larryh commented Mar 21, 2020

Hello again,

Turns out the problem was introduced in .beta.27. Hope this helps.

@Gaelan
Copy link

Gaelan commented Mar 23, 2020

Running into this with paper-menu as well.

@ctwoolsey
Copy link

I've run into this as well with paper-select, but when I tried using beta.27, when I try ember serve, though, I get a message saying, "Could not find the default SASS implementation." I've tried using different versions of ember-cli-sass (8.0.1, 9.0.1, 10.0.0 & 10.0.1) but this did not get rid of the error. Going back to v29 gets rid of this. @larryh did you run into this?

@larryh
Copy link
Author

larryh commented Apr 4, 2020

I can't remember, as it was awhile ago. It does sound familiar, though. (Which probably doesn't help much.)

@ctwoolsey
Copy link

@larryh could you share your package file that is using beta26?

@larryh
Copy link
Author

larryh commented Apr 6, 2020

Sure. (Had to slap a ".txt" on the end because would not allow ".json" files to be attached)

package.json.txt

@ctwoolsey
Copy link

@larryh Thank you. beta26 got rid of the "parentElement is null" error. And I found I hadn't named a default implementation of Sass.

@larryh
Copy link
Author

larryh commented Apr 6, 2020

Glad I could be of help.

@shibulijack
Copy link

I faced the same issue with paper-autocomplete and the fix was to downgrade to .beta26 and implement Node SASS as the default implementation as Dart Sass resulted in an error with angular's mixin.

However, it'd be nice if this issue is fixed. Keep up the amazing work! :)

@alex9nadon
Copy link
Contributor

It seem to be related to cibernox/ember-basic-dropdown#540

@miguelcobain
Copy link
Owner

Can someone check on beta.30?
I changed something that might have fixed this.

@alex9nadon
Copy link
Contributor

It works on my side (beta.30 & ember 3.17)
@animationEnabled={{false}} On ember-basic-dropdown seem to fix the problem.

@ctwoolsey
Copy link

I'm still getting the null errors. Do I have to change @animationEnabled={{false}} in order for it to work? If so where do i put it. I tried adding it to a but that did not fix the issue either.

@miguelcobain
Copy link
Owner

@ctwoolsey what @alex9nadon meant was that on beta.30, ember-paper added @animationEnabled={{false}}.
what version of ember-basic-dropdown are you using? You can check it with npm ls ember-basic-dropdown.

@ctwoolsey
Copy link

ctwoolsey commented May 13, 2020 via email

@shibulijack
Copy link

It works on my side (beta.30 & ember 3.17)
@animationEnabled={{false}} On ember-basic-dropdown seem to fix the problem.

I suppose it fixes the issue partially. There's still a console.log error on animateOut during dropdown close, but it's usable since beta.30.

@miguelcobain
Copy link
Owner

@ctwoolsey please use beta.30

@shibulijack what console log do you see?

@ctwoolsey
Copy link

So using beta 30, I see ember-basic-dropdown v 2.0.15
The console error is:

Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
at PaperSelectEbdContent.animateOut (component.js:64)
at Object.destroyModifier (will-destroy.js:68)
at CustomModifierState.destroy (index.js:7052)
at StringDestroyableDestructor.[DID_DROP] (util.js:355)
at util.js:266
at Set.forEach ()
at didDestroyAssociated (util.js:265)
at SimpleDestructor.[DID_DROP] (util.js:379)
at util.js:266
at Set.forEach ()
animateOut @ component.js:64
destroyModifier @ will-destroy.js:68
destroy @ index.js:7052
[DID_DROP] @ util.js:355
(anonymous) @ util.js:266
didDestroyAssociated @ util.js:265
[DID_DROP] @ util.js:379
(anonymous) @ util.js:266
didDestroyAssociated @ util.js:265
[DID_DROP] @ util.js:379
(anonymous) @ util.js:266
didDestroyAssociated @ util.js:265
[DID_DROP] @ util.js:379
(anonymous) @ util.js:266
didDestroyAssociated @ util.js:265
[DID_DROP] @ util.js:379
(anonymous) @ util.js:304
[DID_DROP] @ util.js:304
commit @ runtime.js:1655
commit @ runtime.js:1803
inTransaction @ runtime.js:1961
_renderRoots @ index.js:9043
_renderRootsTransaction @ index.js:9104
_revalidate @ index.js:9146
invoke @ backburner.js:338
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:43
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:43
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:43
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
ensureInstance @ backburner.js:922
(anonymous) @ index.js:568
dirtyTagFor @ validator.js:518
markObjectAsDirty @ index.js:637
notifyPropertyChange @ index.js:675
set @ index.js:1622
set @ observable.js:176
close @ component.js:57
handleClose @ power-select.js:348
close @ basic-dropdown.js:122
handleRootMouseDown @ basic-dropdown-content.js:160

@fiddler
Copy link
Contributor

fiddler commented May 16, 2020

Getting the same error on my end with 1.0.0-beta.30 as @ctwoolsey above using paper-menu. Running on ember-basic-dropdown @2.0.15 and ember @3.18.

@miguelcobain
Copy link
Owner

@fiddler @ctwoolsey does running npm ls ember-basic-dropdown return you 2.0.15?

@fiddler
Copy link
Contributor

fiddler commented May 17, 2020

Yes, it returns ember-basic-dropdown@2.0.15. You're not seeing it on your end @miguelcobain?

@ctwoolsey
Copy link

It seems that the animate out error, causes a problem with ember-power-select-multiple. None of the selections get loaded. As soon as I downgraded back to beta 26, ember-power-select-multiple was able to work again.

@fiddler
Copy link
Contributor

fiddler commented Sep 3, 2020

This is no longer happening with 1.0.0-beta.32. Seems this commit here prevents the error: d1336ee

@ctwoolsey
Copy link

I am still seeing: "TypeError: Cannot read property 'appendChild' of null" And, ember-power-select-multiple is not showing my selections, when I try beta.32.

@rahsheen
Copy link

This is no longer happening with 1.0.0-beta.32. Seems this commit here prevents the error: d1336ee

Definitely still seeing this on beta32

@wukongrita
Copy link

image

Upgrading to ember 3.20 with beta.35 and still get this when the dropdown closes...

Not happening on 3.16 with beta.35

@ctwoolsey
Copy link

Wondering if anyone has had any luck resolving this. I'm wanting to upgrade my ember version past 3.18 and am seeing deprecation warnings in ember-paper 1.0.0-beta.26.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants