8000 chore(docs): fix collapse accordion example to not use `href="#"` on … · bootstrap-vue/bootstrap-vue@41680ba · GitHub
[go: up one dir, main page]
Skip to content

Commit 41680ba

Browse files
tmorehousejacobmllr95
tmorehouse
and
jacobmllr95
authored
chore(docs): fix collapse accordion example to not use href="#" on buttons (closes #5352) (#5353)
* chore(docs): fix collapse accordion example to not use `href="#"` on buttons * Update README.md * Update README.md * Update README.md Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent bb8ed11 commit 41680ba

File tree

2 files changed

+16
-3
lines changed

2 files changed

+16
-3
lines changed

‎src/components/collapse/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ at a time.
146146
<div role="tablist">
147147
<b-card no-body class="mb-1">
148148
<b-card-header header-tag="header" class="p-1" role="tab">
149-
<b-button block href="#" v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
149+
<b-button block v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
150150
</b-card-header>
151151
<b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
152152
<b-card-body>
@@ -158,7 +158,7 @@ at a time.
158158

159159
<b-card no-body class="mb-1">
160160
<b-card-header header-tag="header" class="p-1" role="tab">
161-
<b-button block href="#" v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
161+
<b-button block v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
162162
</b-card-header>
163163
<b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
164164
<b-card-body>
@@ -169,7 +169,7 @@ at a time.
169169

170170
<b-card no-body class="mb-1">
171171
<b-card-header header-tag="header" class="p-1" role="tab">
172-
<b-button block href="#" v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
172+
<b-button block v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
173173
</b-card-header>
174174
<b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
175175
<b-card-body>

‎src/directives/toggle/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,19 @@ trigger element when the target component is closed, and removed when open. As o
9090
}
9191
```
9292

93+
## Preventing the target from opening or closing
94+
95+
To prevent the trigger element from toggling the target, set the `disabled` prop on `<button>`,
96+
`<b-button>`, or `<b-link>` and the toggle event will _not_ dispatched to the target(s).
97+
98+
`v-b-toggle` also checks if the `click` event (and `keydown` event for non-button/links) was
99+
canceled (i.e. via `event.preventDefault()` or `@click.prevent`), and if so, it will _not_ dispatch
100+
the toggle event to the target(s).
101+
102+
Because of this, avoid placing `v-b-toggle` on a `<b-button>` or `<b-link>` that has the `href` prop
103+
set to `'#'`, as these components (or components based on them) call `event.preventDefault()` to
104+
stop the browser from scrolling to the top of the page.
105+
93106
## Accessibility
94107

95108
The directive, for accessibility reasons, should be placed on an clickable interactive element such

0 commit comments

Comments
 (0)
0