oruga icon indicating copy to clipboard operation
oruga copied to clipboard

Published 20 hours ago • verified publisher icon oruga-ui

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

Open asadhshujau opened this issue 2 years ago • 7 comments

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 avatar Jun 21 '22 06:06 asadhshujau

same case for o-inputitems

asadhshujau avatar Jun 21 '22 10:06 asadhshujau

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

BuffMcBigHuge avatar Jun 21 '22 16:06 BuffMcBigHuge

o-datepicker too

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

asadhshujau avatar Jun 27 '22 04:06 asadhshujau

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

jtommy avatar Jun 27 '22 06:06 jtommy

This issue also occurs with the o-tooltip component.

urkle avatar Jun 28 '22 19:06 urkle

@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?

mlmoravek avatar Dec 10 '23 20:12 mlmoravek

@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

urkle avatar Jan 04 '24 17:01 urkle