Use z-index 3 to show focus state on all sides of input

[kkirsche]

Fixes #17001

JSBin with fix: http://jsbin.com/gifexipibu/edit?html,css,output

[kkirsche]

Travis, please restart tests

Failed to:
The command "if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py download rubygems; fi" failed and exited with 1 during .

[jplehmann]

@kkirsche thanks so much for the fast fix! That did solve the problem with the search input, although the border around buttons on the right look a little off -- this may be next to impossible to address. But this is acceptable to me.

For me the buttons on the right looked even worse, but I don't really need highlighting on those as much so I turned it off.

        #search-submit:focus, .advanced-search-button:focus {
          outline:0px !important;
          -webkit-appearance:none;
          box-shadow: none;
        }
    }

[kkirsche]

Essentially, if they are the same z-index the first item will not have the right focus. If the input is higher, the input will always have all sections of focus while the button will have 3. Vice versa, if the button is highest, the button will always have 4 but the input will always have 3

[cvrebert]

Filed bug regarding Travis error: #17011

[kkirsche]

Travis error fixed via: #17012

[kkirsche]

Travis restart

[cvrebert]

Won't do any good. You'd need to rebase to pick up the updated .travis.yml

[kkirsche]

@cvrebert good point. Just rebased to pull that in

[MohammadYounes]

I think you also need this to address the button focus:

.input-group-btn:last-child > .btn:focus {
    z-index: 3;
}

[MohammadYounes]

Or better, only the focused element should get a higher z-index:

.input-group .form-control:focus, .input-group-btn > .btn:focus {
    z-index: 3;
}

http://jsbin.com/cediwiqiko/2/edit?html,css,output

[mdo]

Looking at this again, I do believe we'd need to limit the z-index increase to be on focus for buttons and inputs, so we don't cause another bug for the buttons being behind on focus. Maybe that's already handled elsewhere though? It's been awhile since I looked at this 😁.

[mdo]

Proper fix on focus coming in #18253.