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

[Bug] o-autocomplete with append-to-body on a modal #373

Open
asadhshujau opened this issue Jun 21, 2022 · 7 comments
Open

[Bug] o-autocomplete with append-to-body on a modal #373

asadhshujau opened this issue Jun 21, 2022 · 7 comments
Assignees
Labels
bug Something isn't working

Comments

@asadhshujau
Copy link

Overview of the problem

Oruga version: [0.5.5]
Vuejs version: [3.2.37]
OS/Browser: Chrome

Description

happens when o-autocomplete is used with appendToBody prop in a programmatic modal with destroyOnHide set to true and modal is closed

Steps to reproduce

  1. make a component with a o-autocomplete with append-to-body prop on it
  2. open a programmatic modal with the component set as the created component and destroyOnHide set to true
  3. close the dialog to see the error

Expected behavior

Close the modal without throwing any errors

Actual behavior

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

@asadhshujau asadhshujau changed the title bug: o-autocomplete with append-to-body on a modal [Bug] o-autocomplete with append-to-body on a modal Jun 21, 2022
@asadhshujau
Copy link
Author

same case for o-inputitems

@BuffMcBigHuge
Copy link

o-dropdown also has this issue. Can reproduce here.

@jtommy jtommy added the bug Something isn't working label Jun 21, 2022
@jtommy jtommy self-assigned this Jun 21, 2022
@asadhshujau
Copy link
Author

o-datepicker too

probably all the components with a dropdown view has this issue. [not confirmed]

@jtommy
Copy link
Member

jtommy commented Jun 27, 2022

Yes, there are 3-4 components that depend on dropdown

@urkle
Copy link
Contributor

urkle commented Jun 28, 2022

This issue also occurs with the o-tooltip component.

@mlmoravek
Copy link
Member

@asadhshujau
The autocomplete component now (v0.8.x) uses the dropdown component internally. Both the dropdown and modal components now implement the old append-to-body feature with the Vue native teleport component.

Is this still a problem?

@urkle
Copy link
Contributor

urkle commented Jan 4, 2024

@mmorainville I just (finally) tested an upgrade to oruga 0.8 and the issue is worse.

I don't seem to be getting this specific error anymore, however the popup doesn't show correctly at all (my testing was with the datepicker component).

Date picker in a model

  1. with teleport the datepicker component is simply not visible at all
  2. turning off teleport the datepicker opens but is severely obscured by the model dialog

Date picker on a page (outside of model)

  1. without teleport it works fine
  2. with teleport the CSS renders completely wrong (end up with a unstyled mess of text for the date table). (using theme-bulma)

So as of right now I have to revert back to oruga 0.7 until issues are resolved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants