Fix popover toggle twice to close #40803
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
If it can help the future reviewer of this PR, you can apply this patch to the branch to have a manual test in the "Checkout" example: Patchdiff --git a/site/content/docs/5.3/examples/checkout/checkout.js b/site/content/docs/5.3/examples/checkout/checkout.js
index 30ea0aa6b..970afe7ec 100644
--- a/site/content/docs/5.3/examples/checkout/checkout.js
+++ b/site/content/docs/5.3/examples/checkout/checkout.js
@@ -1,19 +1,24 @@
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
- 'use strict'
+ "use strict";
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
- const forms = document.querySelectorAll('.needs-validation')
+ const popoverEl = document.getElementById("popover");
+ var popover = new bootstrap.Popover(popoverEl, {
+ content: "Content",
+ placement: "right",
+ trigger: "manual",
+ html: true,
+ });
- // Loop over them and prevent submission
- Array.from(forms).forEach(form => {
- form.addEventListener('submit', event => {
- if (!form.checkValidity()) {
- event.preventDefault()
- event.stopPropagation()
- }
+ console.log("fdsjoijfsdj");
- form.classList.add('was-validated')
- }, false)
- })
-})()
+ const show = document.getElementById("show");
+ show.addEventListener("click", () => {
+ popover.show();
+ });
+
+ const toggle = document.getElementById("toggle");
+ toggle.addEventListener("click", () => {
+ popover.toggle();
+ });
+})();
diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
index 8fe01f02e..1c8e67dd6 100644
--- a/site/content/docs/5.3/examples/checkout/index.html
+++ b/site/content/docs/5.3/examples/checkout/index.html
@@ -9,225 +9,12 @@ extra_js:
body_class: "bg-body-tertiary"
---
-<div class="container">
- <main>
- <div class="py-5 text-center">
- <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
- <h1 class="h2">Checkout form</h1>
- <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
- </div>
+<button id="popover" class="btn btn-primary">Test</button>
- <div class="row g-5">
- <div class="col-md-5 col-lg-4 order-md-last">
- <h4 class="d-flex justify-content-between align-items-center mb-3">
- <span class="text-primary">Your cart</span>
- <span class="badge bg-primary rounded-pill">3</span>
- </h4>
- <ul class="list-group mb-3">
- <li class="list-group-item d-flex justify-content-between lh-sm">
- <div>
- <h6 class="my-0">Product name</h6>
- <small class="text-body-secondary">Brief description</small>
- </div>
- <span class="text-body-secondary">$12</span>
- </li>
- <li class="list-group-item d-flex justify-content-between lh-sm">
- <div>
- <h6 class="my-0">Second product</h6>
- <small class="text-body-secondary">Brief description</small>
- </div>
- <span class="text-body-secondary">$8</span>
- </li>
- <li class="list-group-item d-flex justify-content-between lh-sm">
- <div>
- <h6 class="my-0">Third item</h6>
- <small class="text-body-secondary">Brief description</small>
- </div>
- <span class="text-body-secondary">$5</span>
- </li>
- <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
- <div class="text-success">
- <h6 class="my-0">Promo code</h6>
- <small>EXAMPLECODE</small>
- </div>
- <span class="text-success">−$5</span>
- </li>
- <li class="list-group-item d-flex justify-content-between">
- <span>Total (USD)</span>
- <strong>$20</strong>
- </li>
- </ul>
+<hr />
- <form class="card p-2">
- <div class="input-group">
- <input type="text" class="form-control" placeholder="Promo code">
- <button type="submit" class="btn btn-secondary">Redeem</button>
- </div>
- </form>
- </div>
- <div class="col-md-7 col-lg-8">
- <h4 class="mb-3">Billing address</h4>
- <form class="needs-validation" novalidate>
- <div class="row g-3">
- <div class="col-sm-6">
- <label for="firstName" class="form-label">First name</label>
- <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
- <div class="invalid-feedback">
- Valid first name is required.
- </div>
- </div>
+<button id="show">Show</button>
- <div class="col-sm-6">
- <label for="lastName" class="form-label">Last name</label>
- <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
- <div class="invalid-feedback">
- Valid last name is required.
- </div>
- </div>
+<hr />
- <div class="col-12">
- <label for="username" class="form-label">Username</label>
- <div class="input-group has-validation">
- <span class="input-group-text">@</span>
- <input type="text" class="form-control" id="username" placeholder="Username" required>
- <div class="invalid-feedback">
- Your username is required.
- </div>
- </div>
- </div>
-
- <div class="col-12">
- <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
- <input type="email" class="form-control" id="email" placeholder="you@example.com">
- <div class="invalid-feedback">
- Please enter a valid email address for shipping updates.
- </div>
- </div>
-
- <div class="col-12">
- <label for="address" class="form-label">Address</label>
- <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
- <div class="invalid-feedback">
- Please enter your shipping address.
- </div>
- </div>
-
- <div class="col-12">
- <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
- <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
- </div>
-
- <div class="col-md-5">
- <label for="country" class="form-label">Country</label>
- <select class="form-select" id="country" required>
- <option value="">Choose...</option>
- <option>United States</option>
- </select>
- <div class="invalid-feedback">
- Please select a valid country.
- </div>
- </div>
-
- <div class="col-md-4">
- <label for="state" class="form-label">State</label>
- <select class="form-select" id="state" required>
- <option value="">Choose...</option>
- <option>California</option>
- </select>
- <div class="invalid-feedback">
- Please provide a valid state.
- </div>
- </div>
-
- <div class="col-md-3">
- <label for="zip" class="form-label">Zip</label>
- <input type="text" class="form-control" id="zip" placeholder="" required>
- <div class="invalid-feedback">
- Zip code required.
- </div>
- </div>
- </div>
-
- <hr class="my-4">
-
- <div class="form-check">
- <input type="checkbox" class="form-check-input" id="same-address">
- <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
- </div>
-
- <div class="form-check">
- <input type="checkbox" class="form-check-input" id="save-info">
- <label class="form-check-label" for="save-info">Save this information for next time</label>
- </div>
-
- <hr class="my-4">
-
- <h4 class="mb-3">Payment</h4>
-
- <div class="my-3">
- <div class="form-check">
- <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
- <label class="form-check-label" for="credit">Credit card</label>
- </div>
- <div class="form-check">
- <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
- <label class="form-check-label" for="debit">Debit card</label>
- </div>
- <div class="form-check">
- <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
- <label class="form-check-label" for="paypal">PayPal</label>
- </div>
- </div>
-
- <div class="row gy-3">
- <div class="col-md-6">
- <label for="cc-name" class="form-label">Name on card</label>
- <input type="text" class="form-control" id="cc-name" placeholder="" required>
- <small class="text-body-secondary">Full name as displayed on card</small>
- <div class="invalid-feedback">
- Name on card is required
- </div>
- </div>
-
- <div class="col-md-6">
- <label for="cc-number" class="form-label">Credit card number</label>
- <input type="text" class="form-control" id="cc-number" placeholder="" required>
- <div class="invalid-feedback">
- Credit card number is required
- </div>
- </div>
-
- <div class="col-md-3">
- <label for="cc-expiration" class="form-label">Expiration</label>
- <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
- <div class="invalid-feedback">
- Expiration date required
- </div>
- </div>
-
- <div class="col-md-3">
- <label for="cc-cvv" class="form-label">CVV</label>
- <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
- <div class="invalid-feedback">
- Security code required
- </div>
- </div>
- </div>
-
- <hr class="my-4">
-
- <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
- </form>
- </div>
- </div>
- </main>
-
- <footer class="my-5 pt-5 text-body-secondary text-center text-small">
- <p class="mb-1">© 2017–{{< year >}} Company Name</p>
- <ul class="list-inline">
- <li class="list-inline-item"><a href="#">Privacy</a></li>
- <li class="list-inline-item"><a href="#">Terms</a></li>
- <li class="list-inline-item"><a href="#">Support</a></li>
- </ul>
- </footer>
-</div>
+<button id="toggle">Toggle</button>I haven't had the opportunity to progress further with this yet. The patch appears to resolve the issue, but I lack the necessary historical context to perform comprehensive non-regression testing, as not all scenarios are covered by unit tests. Regressions can happen easily with popovers and tooltips unfortunately. |
|
Anything required from my side? |
No, you're all set for now. Thanks for the PR—it's now added to our TODO list. |
GeoSot
approved these changes
Sep 12, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes #40802
Motivation & Context
Type of changes
Checklist
npm run lint)Live previews
Related issues
#40802