oruga
oruga copied to clipboard
[Bug] o-autocomplete with append-to-body on a modal
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
- make a component with a o-autocomplete with append-to-body prop on it
- open a programmatic modal with the component set as the created component and destroyOnHide set to true
- 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.
same case for o-inputitems
o-dropdown
also has this issue. Can reproduce here.
o-datepicker too
probably all the components with a dropdown view has this issue. [not confirmed]
Yes, there are 3-4 components that depend on dropdown
This issue also occurs with the o-tooltip component.
@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?
@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
- with teleport the datepicker component is simply not visible at all
- turning off teleport the datepicker opens but is severely obscured by the model dialog
Date picker on a page (outside of model)
- without teleport it works fine
- 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