Examples/Floating-labels: fix bad behavior with autofill #31948

eduardogoncalves · 2020-10-21T21:27:25Z

If the browser has already credentials on the autocomplete, the layout of will breaks.

* clear timeout before showing the toast * Add unit test * Remove the check for timeout * Check for clearTimeout to have been called Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Replaces #30498 by adding four new null default variables for .nav-link. Doesn't carry over font-style from the original PR though since that's rarely used, at least by default Bootstrap. Nullifies all values from that PR, too, since we count on some basic inheritance here and don't need color by default.

* Expand on disabled fieldsets and faked buttons include further advice/information on how to disable faked buttons for keyboard/AT users * Centralise accessible name advice in forms overview seems odd to only mention (separately) label, aria-label etc in input-group and layout. the advice is just as pertinent in other sections like select. checks only skims over this. moving this, in expanded form, into the overview section itself. adding a specific cross-reference (just because they are easily left with no accname at all) in the checks page. * Change warning about accessibility, modify server-side example - paradoxically, due to our current problems with validation (see #28414) and the fact that browsers seem to have improved in this area for the most part, it's now actually better to use browser-native validation - added explicit `id` and `aria-describedby` association to at least the server-side form error messages, to show how it should be done properly, and expanded the prose for that explaining this. * Replace `.sr-only` with `.visually-hidden` in new addition * Copy edits for clarity in parenthetical * Copy and formatting tweaks - Wordsmithing here and there - Turns some hyphens into em dashes - Turns a long running comma separated list into an unordered list - Rearranges some copy just a bit Co-authored-by: Mark Otto <markd.otto@gmail.com>

* feat(buttons): easier disabled state customization * docs(migration): mention new arguments for disabled state in button-variant() * Update migration.md Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com>

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

* Tweak green and cyan colors, bump min contrast ratio to 4.5 Co-authored-by: XhmikosR <xhmikosr@gmail.com>

* @rollup/plugin-babel ^5.0.4 → ^5.1.0 * @rollup/plugin-commonjs ^13.0.0 → ^13.0.1 * @rollup/plugin-node-resolve ^8.1.0 → ^8.4.0 * autoprefixer ^9.8.4 → ^9.8.5 * hugo-bin ^0.61.0 → ^0.62.0 * rollup ^2.20.0 → ^2.21.0

* Clarify screen reader changes * Add some docs and reboot notes to migration guide * Add mention of docs renaming of screen reader helper page * Mention null vars from navs PR at #31035 * Update migration.md Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Version.md on v5.getbootstrap.com is only referring to v1 > v4 when it should be referring to v1 > v5.

Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.62.0 to 0.62.1. - [Release notes](https://github.com/fenneclab/hugo-bin/releases) - [Commits](fenneclab/hugo-bin@v0.62.0...v0.62.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 13.0.1 to 14.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](rollup/plugins@commonjs-v13.0.1...commonjs-v14.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>

New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341 This rule suppresses this new behavior and reverts back to the old way. See https://drafts.csswg.org/css-scroll-anchoring/

Bumps [eslint](https://github.com/eslint/eslint) from 7.4.0 to 7.5.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/master/CHANGELOG.md) - [Commits](eslint/eslint@v7.4.0...v7.5.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

For some weird reason, using "Exports" as the callout header leads to TypeError coming from clipboard.js

Bumps [nodemon](https://github.com/remy/nodemon) from 2.0.5 to 2.0.6. - [Release notes](https://github.com/remy/nodemon/releases) - [Commits](remy/nodemon@v2.0.5...v2.0.6) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

ffoodd · 2020-10-22T07:38:42Z

site/content/docs/5.0/examples/floating-labels/floating-labels.css

@@ -76,7 +76,8 @@ body {
  color: #777;
 }

-.form-label-group input:not(:placeholder-shown) ~ label {
+.form-label-group input:not(:placeholder-shown) ~ label,
+.form-label-group input:-webkit-autofill ~ label {


Since :-webkit-autofill isn't supported in all our supported browsers (Firefox and Edge 16 <> 79), this selector invalidates the whole declaration block for some of them.

There's an internal pseudo-class in Firefox (:-moz-auto-fill) but it doesn't seem to be available for authors as of now.

So in order to apply this as a progressive enhancement, we need to dedupe those selectors (and duplicate the rules).

Does the current autoprefixer version support this property? I haven't tried it yet.

Hi @XhmikosR, where can I learn on how to check this info?

postcss/autoprefixer#626 is outdated by a few years, unsure if there's anything else for it.

note that Firefox doesn't have this bug in the first place, so autoprefixing may not be an issue here (for now anyway, unless it turns out Chrome are doing this on purpose as a security measure, and Firefox later copies the behavior)

@ffoodd

Duplicated the rule to `input:-webkit-autofill` to prevent the invalidation of the whole declaration block as pointed by @ffoodd

mdo · 2020-10-22T16:25:20Z

Is this nullified by #30449?

eduardogoncalves · 2020-10-22T18:27:14Z

Hello @mdo, this issue is still present in #30449. The issue appears when browser autofill the field.

MartijnCuppens · 2020-10-23T10:49:30Z

@eduardogoncalves, what version of Chrome is that? I can't reproduce this on v86 (mac & windows)

eduardogoncalves · 2020-10-23T12:16:03Z

Hi @MartijnCuppens it's version 86.0.4240.111 running on Windows 10 Pro 2004 19041.572

eduardogoncalves · 2020-10-23T12:28:42Z

I made a video to demonstrate it, because if you click in any part of the screen, it 'fixes' the issue. But if you just scroll the page, you can see the issue. This means that if the field is in the first viewport, the user will see the issue on chrome.

The video was rec in Windows
https://youtu.be/FUoBUuhYJDY

The issue on chrome v86 mac

patrickhlauke · 2020-10-23T14:09:37Z

are you running some form of autofill extension or similar? can't replicate the behavior, at least not on the https://deploy-preview-30449--twbs-bootstrap.netlify.app/docs/5.0/forms/floating-labels/ page

eduardogoncalves · 2020-10-23T14:15:08Z

@patrickhlauke I'm using chrome's default credential manager.

To make it work, I typed some text into email and password input, and asked the browser to remember that info.

patrickhlauke · 2020-10-23T14:32:00Z

ah, hadn't tried explicitly saving the data once typed in (i usually rely on chrome saving credentials on an actual submit). ok, i can see the issue now. it does look like a bug in Chrome

patrickhlauke · 2020-10-23T14:56:18Z

indeed, just tried a rough minimal test case, and chrome has a bug there where it doesn't evaluate the :placeholder-shown until the first interaction/click on the page (maybe for security reasons?)

https://codepen.io/patrickhlauke/pen/gOMgLxR / https://cdpn.io/patrickhlauke/debug/gOMgLxR

[edit: chrome bug filed https://bugs.chromium.org/p/chromium/issues/detail?id=1141874 ]

eduardogoncalves · 2020-10-23T15:18:04Z

Adding style rules to input:-webkit-autofill seems to prevent this from happen.

mdo · 2020-10-25T19:54:30Z

This will need to be retargeted to v4-dev I think, and then applied to the floating labels PR at #30449. Any interest in handling that @eduardogoncalves?

eduardogoncalves · 2020-10-26T22:04:08Z

[edit] just saw that you're editing it.

@mdo, ok, I can do it. Do you mean edit _floating-labels.scss in v5-floating-labels branch?
https://github.com/twbs/bootstrap/blob/v5-floating-labels/scss/forms/_floating-labels.scss

mdo · 2020-10-26T22:22:42Z

@eduardogoncalves Hah, yeah, testing it out for v5 in that PR. Would you mind doing this PR for v4-dev though? We can fix this issue for v4 users that way. You might be able to retarget this PR to v4-dev, but unsure if there are any major differences between the example in v5 vs v4.

eduardogoncalves · 2020-10-27T00:03:27Z

@mdo, as this has too many conflicts while retargeting to v4-dev... I create a branch from v4-dev and created a new PR #31979. And will close this one.

eduardogoncalves · 2020-10-27T00:24:54Z

close in favor of #31979

patrickhlauke and others added 30 commits July 10, 2020 16:00

Emphasise/call out the note about .invisible and AT

4702f0c

Reword slightly awkward-sounding description

7657c1e

Add alias/redirect

9d2cd1b

Rename sr-only to visually-hidden in new/renamed helper doc file

69b3c46

Single line example for inline forms

6eaa36f

Update layout.md

6acdfdb

Clear timeout before showing the toast (#31155)

f6348f6

* clear timeout before showing the toast * Add unit test * Remove the check for timeout * Check for clearTimeout to have been called Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Fix docs sass importing example.

19b5908

toasts: make default duration 5s (#31109)

91c11d6

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Unbreak lines.

f15af45

scrollspy.js: minor refactoring

b97fcd3

tooltip.js: remove variable used once.

0eb120e

Move function

a67231a

Add parentheses around multiple spread conditions

6d86b14

Join template literals

b345746

v5: Tweak some colors (#31276)

6914efe

* Tweak green and cyan colors, bump min contrast ratio to 4.5 Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Update devDependencies (#31283)

2d43e64

* @rollup/plugin-babel ^5.0.4 → ^5.1.0 * @rollup/plugin-commonjs ^13.0.0 → ^13.0.1 * @rollup/plugin-node-resolve ^8.1.0 → ^8.4.0 * autoprefixer ^9.8.4 → ^9.8.5 * hugo-bin ^0.61.0 → ^0.62.0 * rollup ^2.20.0 → ^2.21.0

Update version.md to include v5

aa5be4c

Version.md on v5.getbootstrap.com is only referring to v1 > v4 when it should be referring to v1 > v5.

Improve spacing

c52b7d5

Sort the versions from the latest to the oldest.

9e372b1

docs(skippy): prevent skip links from overlapping header

cb1eee1

Add toasts to the components requiring JavaScript (#31344)

2ec2e13

XhmikosR and others added 6 commits October 19, 2020 16:05

Pin terser to v5.1.0 and regenerate package-lock.json (#31928)

c85e863

Update docs example on how to optimize JavaScript bundle

9cc24cf

mention default export in our docs optimize section

480561c

Update optimize.md

4fca7dd

For some weird reason, using "Exports" as the callout header leads to TypeError coming from clipboard.js

fix bad behavior with autofill

eeb893f

eduardogoncalves requested a review from a team as a code owner October 21, 2020 21:27

eduardogoncalves mentioned this pull request Oct 21, 2020

Floating label stay at empty input position browser preload input #27121

Closed

eduardogoncalves changed the title ~~fix bad behavior with autofill~~ Examples/Floating-labels: fix bad behavior with autofill Oct 21, 2020

ffoodd requested changes Oct 22, 2020

View reviewed changes

Update floating-labels.css

81cae34

Duplicated the rule to `input:-webkit-autofill` to prevent the invalidation of the whole declaration block as pointed by @ffoodd

eduardogoncalves changed the base branch from main to v4-dev October 26, 2020 23:43

eduardogoncalves requested a review from a team as a code owner October 26, 2020 23:43

eduardogoncalves mentioned this pull request Oct 27, 2020

V4 Examples/Floating-labels: fix bad behavior with autofill #31979

Merged

eduardogoncalves closed this Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Examples/Floating-labels: fix bad behavior with autofill #31948

Examples/Floating-labels: fix bad behavior with autofill #31948

eduardogoncalves commented Oct 21, 2020

ffoodd Oct 22, 2020

XhmikosR Oct 23, 2020

eduardogoncalves Oct 23, 2020

mdo Oct 23, 2020

patrickhlauke Oct 25, 2020

mdo commented Oct 22, 2020 •

edited

eduardogoncalves commented Oct 22, 2020 •

edited

MartijnCuppens commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020 •

edited

patrickhlauke commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020

patrickhlauke commented Oct 23, 2020

patrickhlauke commented Oct 23, 2020 •

edited

eduardogoncalves commented Oct 23, 2020

mdo commented Oct 25, 2020

eduardogoncalves commented Oct 26, 2020 •

edited

mdo commented Oct 26, 2020

eduardogoncalves commented Oct 27, 2020 •

edited

eduardogoncalves commented Oct 27, 2020

Examples/Floating-labels: fix bad behavior with autofill #31948

Examples/Floating-labels: fix bad behavior with autofill #31948

Conversation

eduardogoncalves commented Oct 21, 2020

ffoodd Oct 22, 2020

Choose a reason for hiding this comment

XhmikosR Oct 23, 2020

Choose a reason for hiding this comment

eduardogoncalves Oct 23, 2020

Choose a reason for hiding this comment

mdo Oct 23, 2020

Choose a reason for hiding this comment

patrickhlauke Oct 25, 2020

Choose a reason for hiding this comment

mdo commented Oct 22, 2020 • edited

eduardogoncalves commented Oct 22, 2020 • edited

MartijnCuppens commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020 • edited

patrickhlauke commented Oct 23, 2020

eduardogoncalves commented Oct 23, 2020

patrickhlauke commented Oct 23, 2020

patrickhlauke commented Oct 23, 2020 • edited

eduardogoncalves commented Oct 23, 2020

mdo commented Oct 25, 2020

eduardogoncalves commented Oct 26, 2020 • edited

[edit] just saw that you're editing it.

mdo commented Oct 26, 2020

eduardogoncalves commented Oct 27, 2020 • edited

eduardogoncalves commented Oct 27, 2020

mdo commented Oct 22, 2020 •

edited

eduardogoncalves commented Oct 22, 2020 •

edited

eduardogoncalves commented Oct 23, 2020 •

edited

patrickhlauke commented Oct 23, 2020 •

edited

eduardogoncalves commented Oct 26, 2020 •

edited

eduardogoncalves commented Oct 27, 2020 •

edited