v6: Datepicker and Toast are placed inside dialog ,they are rendering wrong, and I like anchor position api more
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- css, javascript
- Domain
- frontend
Research direction
Start with the reduced test case at https://github.com/shenjunjian/bs6-demo and inspect how the datepicker and toast render inside a modal dialog in Bootstrap 6 alpha. Reproduce the reported behavior in Chrome, then check how Bootstrap’s Floating UI integration handles these components in the top layer. Done means the rendering issue is understood and the components behave correctly in the reduced case.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
TopLayer
Due to TopLayer rendering, when a Datepicker component and a Toast component are placed inside a <dialog> element, the child components exhibit rendering anomalies.
TopLayer rendering is a powerful feature of browsers; however, it disrupts many standard behaviors and is incompatible with numerous third-party plugins.However, I prefer to use the browser's native behavior, so I still recommend using dialog.showModal(); avoid using dialog.show()
Why am I validating this combination?
While reviewing the documentation, I noticed that bs6 depends on floating-ui; my original intention was to verify whether floating-ui conflicts with TopLayer.
Since I am familiar with TopLayer's mechanism, I realized that using tooltips and Popovers in a dialog is highly likely to introduce bugs; typically, component libraries insert the pop-up layer at the bottom of the body.Fortunately, the BS6 was inserted inside the dialog, so I was unable to reproduce the bug.
Why not give up floating-ui?
I wonder why we haven't simply used the Popover API and the Anchor Position API directly; since this is a brand-new framework, why not take a more radical approach?The only consequence is that you'll need to update your browser; I see that the latest versions of Chrome, Firefox, and Safari already support it.
Reduced test cases
https://github.com/shenjunjian/bs6-demo
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
6.0 alpha
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.7k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 103
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
Select input form caret wrong position on RTL modePossibly taken A pull request linked to this issue is open or already merged. Openbug confirmed css v6
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
twbs/bootstrap#43327 · 1 comment ·
Maintainers usually reply within 1 day
-
v6: OTP input keeps the rest of a selection when you type over itPossibly taken @thejesh23 claimed this 2 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
twbs/bootstrap#43323 · 2 comments ·
Maintainers usually reply within 1 day
-
v6: Strength ignores common symbols as special charactersPossibly taken @thejesh23 claimed this 2 days ago. Openbug confirmed docs has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
twbs/bootstrap#43322 · 1 comment ·
Maintainers usually reply within 1 day
-
v6 alpha - hover-lift effect on menu dropdown only works when mouse is over the buttonPossibly taken @Aryan9891 claimed this 5 days ago. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Dialog closes when a file input inside it has its picker cancelledPossibly taken @samyferhat claimed this 5 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
twbs/bootstrap#43278 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
Similar issues
-
Panic on live viewport resize when unstyled elements exist in display: none subtreePossibly taken @GoCoder7 claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
DioxusLabs/blitz#1488 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 72/100
brave/adblock-lists#3068 ·
Maintainers usually reply within 1 day
-
Art style modal: show the character avatars it reads, and name them in the Use references buttonOpenenhancement good first issue priority: low size: XS
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
Refit MenuOpen(RFE) Enhancement Refit Project
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
MegaMek/mekhq#10934 · 1 comment ·
Maintainers usually reply within 1 day