ASelect options inside ADrawer are not visible about anu HOT 14 CLOSED

we can add a backdrop to every component that is popup like and when the user clicks outside of the component top most component will get closed.

Yeah, that sounds good.

This is a tiny experiment I did and I think it might look promising and allows Infinite nesting without worry like other frameworks.

That's a cool idea and I like it. I can imagine how it would be nicely layered.

from anu.

I found a new way and wanted to validate it with you:

I will use provide & inject to handle js z-index correctly (just for rendering, we still need to handle drawer close on click of select option).

In parent component we will have zIndexModifier:

// get zIndexModifier from parent component
const zIndexModifier = inject('zIndexModifier', 0)

// Increase zIndexModifier by 10 and add current component's zIndex
const zIndex = zIndexModifier + 10 + 6
provide('zIndexModifier', zIndex)

Now on child component like select we will have the same code:

// provide is not needed in select. Hence we can also omit adding 10 to zIndexModifier
const zIndexModifier = inject('zIndexModifier', 0)
const zIndex = zIndexModifier + 4

According to this assuming new z-index for current docs:

6 drawer
5 navbar
4 menu
4 select

Now for the drawer, we will have 16 z-index and for select inside it, we will have (16 + 10 = ) 26 z-index. However, if select isn't inside drawer its z-index will be 14 as normal below drawer 😇

Next, when we click on any select option it will close the drawer. For this we will need to assign dynamic id to each drawer and using the .closest we can omit closing the drawer.

This is a tiny experiment I did and I think it might look promising and allows Infinite nesting without worry like other frameworks.

Off to bed. Please let me know your thoughts on this.

Following this approach, I made this PR to fix the problem.

from anu.

Maybe we need to use use inline style for z-index based on some strategy. E.g. increase z-index if opened inside drawer.

Do you have any good idea?

from anu.

Maybe add some name property to the ADrawer component and in ASelect use closest() method to see if is ASelect inside the ADrawer?

from anu.

Looks promising, just have to confirm if this will search in virtual DOM and don't modify/touch the existing DOM.

However, Select & Drawer at the moment are siblings not parent-child.

from anu.

Unfortunately, I have no idea how to verify that DOM will not be touched during the search.

I thought Select is a descendant of Drawer and only his options are teleported into the body and thus siblings.

from anu.

Yes! Only select's options/dropdown is teleported 💯

from anu.

I checked other frameworks and they just give too much z-index to select and it overlaps on the navbar like below:

from anu.

Tonight I will check how others doing this and will let you know about the solution.

if you have anything to share please let me know.

from anu.

All I can think of now is:

• set a large z-index
• conditionally increase the index using in-line style
• conditionally change the teleport target (which would also solve #45 )

from anu.

I found a new way and wanted to validate it with you:

I will use provide & inject to handle js z-index correctly (just for rendering, we still need to handle drawer close on click of select option).

In parent component we will have zIndexModifier:

// get zIndexModifier from parent component
const zIndexModifier = inject('zIndexModifier', 0)

// Increase zIndexModifier by 10 and add current component's zIndex
const zIndex = zIndexModifier + 10 + 6
provide('zIndexModifier', zIndex)

Now on child component like select we will have the same code:

// provide is not needed in select. Hence we can also omit adding 10 to zIndexModifier
const zIndexModifier = inject('zIndexModifier', 0)
const zIndex = zIndexModifier + 4

According to this assuming new z-index for current docs:

6 drawer
5 navbar
4 menu
4 select

Now for the drawer, we will have 16 z-index and for select inside it, we will have (16 + 10 = ) 26 z-index. However, if select isn't inside drawer its z-index will be 14 as normal below drawer 😇

Next, when we click on any select option it will close the drawer. For this we will need to assign dynamic id to each drawer and using the .closest we can omit closing the drawer.

This is a tiny experiment I did and I think it might look promising and allows Infinite nesting without worry like other frameworks.

Off to bed. Please let me know your thoughts on this.

from anu.

Oh, i forgot .closest cant find sibling.

Have to find another way to prevent closing.

from anu.

we can add a backdrop to every component that is popup like and when the user clicks outside of the component top most component will get closed.

E.g. When you open select inside drawer click outside of select will close the select and not drawer as we clicked on backdrop of select. We will remove onclickoutside composable usage.

from anu.

I also created another PR to fix the issue where ADrawer close event would be affected by other components.

from anu.