_input-groups.scss has become quite hard to maintain, mainly because of the nesting we have with.input-group-prepend and.input-group-append. It's actually pretty simple to remove this. This will also make our html look a lot simpler.

Before:

<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div>

After:

<divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div>

Demo:https://deploy-preview-29885--twbs-bootstrap.netlify.com/docs/4.3/forms/input-group/

Alsocloses#30111,closes#30104
Seehttps://codepen.io/MartijnCuppens/pen/mdyZBoR

For the dropdown buttons some things needed to be changed in order to make this work because theshow class was added to the (random) parent of the toggle button instead to the button itself. The way the dropdown menu is found is now changed.

While I was working on this, I discovered a bug which is explained in#30117. Please review this first because that PR also includes a test.

I've also added an additional example to test multiple dropdowns in a input group:https://deploy-preview-29885--twbs-bootstrap.netlify.com/docs/4.3/forms/input-group/#buttons-with-dropdowns

To Do:

Change the way the dropdown menu is detected
Change the way active states are set to toggle buttons
Adjust existing tests

MartijnCuppens added css v5 no-backport-to-v4 labels

Dec 19, 2019

MartijnCuppens requested a review froma team as acode owner

December 19, 2019 14:36

Copy link

Contributor

alecpl commentedDec 20, 2019•
edited
Loading

Very nice. Thank you.

Copy link

Member

XhmikosR commentedDec 24, 2019

Definitely like this, reduces the final CSS size too 🎉

XhmikosR approved these changes

Dec 25, 2019

View reviewed changes

ysds reviewed

Dec 26, 2019

View reviewed changes

Copy link

Contributor

ysds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Some use cases are no longer supported, are they intentional?

v4 supported use cases:#25352

Copy link

MemberAuthor

MartijnCuppens commentedDec 27, 2019

@ysds, what use cases exactly?

(I know theinput group↔️ validation message thing is still an issue, but this is not something new?)

MartijnCuppens mentioned this pull request

Jan 2, 2020

Input group scss refactoring#28309

Closed

Copy link

MemberAuthor

MartijnCuppens commentedJan 31, 2020

Ping@ysds

Copy link

Member

XhmikosR commentedJan 31, 2020

Just so we are safe, did you check the examples too@MartijnCuppens?

Copy link

MemberAuthor

MartijnCuppens commentedJan 31, 2020

@XhmikosR, no appearances ofinput-group-prepend orinput-group-append left. Only thebtn-groups are used in the examples.

Copy link

Contributor

ysds commentedJan 31, 2020

@MartijnCuppens Please see dropdown menu's corner inthis netlify:

That should be rounded.

And cases that have multiple dropdown menus:

MartijnCuppens force-pushed themaster-mc-drop-input-group-prepend-appends branch fromff247c2 tocd0b3acCompare

January 31, 2020 10:19

Copy link

MemberAuthor

MartijnCuppens commentedJan 31, 2020

Just fixed that.

Copy link

Contributor

ysds commentedJan 31, 2020

The 2nd issue (multiple active states with multiple dropdowns) still seems to occur.

MartijnCuppens requested a review froma team as acode owner

February 1, 2020 13:56

XhmikosR requested a review fromJohann-S

February 1, 2020 13:57

MartijnCuppens force-pushed themaster-mc-drop-input-group-prepend-appends branch 4 times, most recently from8c82e88 to137a7fdCompare

February 1, 2020 18:10

Copy link

Contributor

ysds commentedFeb 10, 2020•
edited
Loading

The CSS side LGTM.@XhmikosR Could you see the JS side?

Copy link

MemberAuthor

MartijnCuppens commentedFeb 10, 2020

Please reviewhttps://github.com/twbs/bootstrap/pull/30117/files first, it includes a fix and test for theprev() function.

mdo added the js label

Mar 7, 2020

Copy link

Member

mdo commentedMar 7, 2020

Punted to Alpha 2 for now, but would happily see it back to first alpha if the JS errors get fixed.

MartijnCuppens force-pushed themaster-mc-drop-input-group-prepend-appends branch 2 times, most recently fromb64fd1e to02838f6Compare

March 10, 2020 19:58

Copy link

MemberAuthor

MartijnCuppens commentedMar 10, 2020

This fails in IE because of the matches polyfill:

IE 11.0.0 (Windows 10.0.0) Dropdown data-api should fire hide and hidden event without a clickEvent if event type is not click FAILEDObject doesn't support property or method 'matches' thrownIE 11.0.0 (Windows 10.0.0) Dropdown data-api should fire hide and hidden event without a clickEvent if event type is not click FAILEDObject doesn't support property or method 'matches' thrown................................................IE 11.0.0 (Windows 10.0.0) Dropdown data-api should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key FAILEDObject doesn't support property or method 'matches' thrownError: Expected true to equal false.    at <Jasmine>   at Anonymous function (js/tests/unit/js/tests/unit/dropdown.spec.js:1495:9 <- js/tests/unit/dropdown.spec.js:15745:11)IE 11.0.0 (Windows 10.0.0) Dropdown data-api should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key FAILEDObject doesn't support property or method 'matches' thrownError: Expected true to equal false.    at <Jasmine>   at Anonymous function (js/tests/unit/js/tests/unit/dropdown.spec.js:1495:9 <- js/tests/unit/dropdown.spec.js:15745:11)