Commit b5c451a8 authored by Robert Knight's avatar Robert Knight

Fix search button not expanding search bar in Safari

The search bar expands from 0 to 150px when the input is focused
but in Safari the <input> will not accept focus via
input.focus() if its max-width is _exactly_ 0px.

Setting it to a near-zero +ve value instead avoids the problem.

Fixes #2654
parent 887ac52d
......@@ -32,7 +32,13 @@
padding: 0px;
width: 100%;
max-width: 0px;
// the search box expands when focused, via a change in the
// `max-width` property. In Safari, the <input> will not accept
// focus if `max-width` is set to 0px so we set it to
// a near-zero positive value instead.
// See GH #2654
max-width: 0.1px;
transition: max-width .3s ease-out, padding-left .3s ease-out;
&:disabled {
......@@ -40,6 +46,8 @@
color: $gray-light;
}
// expand the search input when focused (triggered by clicking
// on the search icon) or when `is-expanded` is applied
&:focus,&.is-expanded {
max-width: $expanded-max-width;
padding-left: 6px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment